Pembinaan laman web peringkat permulaan

Dr. Vignes Gopal
Dr. Vignes GopalFull time Lecturer em Inti International College Subang

Pembinaan laman web melalui HTML_Versi Bahasa Malaysia

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 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:-
<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>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 2
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini;-
Kod 3
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah:-
Kod 4
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 5
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td.
</tr>
</table>
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 6
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<tr>
<td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya pada paparan internet explorer seperti di bawah:-
Kod 7
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya dapat dlihat pada paparan internet explorer seperti di bawah ini:-
Kod 8
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:-
Kod 9
<table border="1">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
</table>
Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:-
Kod 10
<table border="1">
<tr>
<td rowspan= 2>&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</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">&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
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

Recomendados

Jamal's dokumen por
Jamal's dokumenJamal's dokumen
Jamal's dokumenhttp://www.facebook.com/SeikatKasihDanSayang
405 visualizações5 slides
Langkah demi langkah menguasai html 5 (versi alpha) por
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
1.1K visualizações15 slides
Buku tips & trik adobe dreamweaver cs5.5 2012_roki por
Buku tips & trik adobe dreamweaver cs5.5 2012_rokiBuku tips & trik adobe dreamweaver cs5.5 2012_roki
Buku tips & trik adobe dreamweaver cs5.5 2012_rokiAmri Amri
7.7K visualizações130 slides
Modul HTML5 por
Modul HTML5Modul HTML5
Modul HTML5As Faizin
2.3K visualizações20 slides
Presentasi konsep dasar html por
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar htmlDedy Setiawan
3.5K visualizações18 slides
Pengenalan Macromedia Dreamweaver por
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverAchmad Solichin
6.5K visualizações31 slides

Mais conteúdo relacionado

Mais procurados

Html power point por
Html power pointHtml power point
Html power pointminmon
4.1K visualizações18 slides
Pemrograman Internet - HTML (1) por
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Arifin Swift
3.2K visualizações31 slides
Makalah Desain web menggunakan dreamweaver 8 por
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8Ichsan Smith
59K visualizações12 slides
Macromedia dreamweaver-8 por
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8Kiki Saputra
3.5K visualizações31 slides
Adobe dreamwaver por
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaverzhafdiana
18.3K visualizações21 slides
Training HTML por
Training HTMLTraining HTML
Training HTMLYanwar Purnama
1.1K visualizações203 slides

Mais procurados(20)

Html power point por minmon
Html power pointHtml power point
Html power point
minmon4.1K visualizações
Pemrograman Internet - HTML (1) por Arifin Swift
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)
Arifin Swift3.2K visualizações
Makalah Desain web menggunakan dreamweaver 8 por Ichsan Smith
Makalah Desain web menggunakan dreamweaver 8Makalah Desain web menggunakan dreamweaver 8
Makalah Desain web menggunakan dreamweaver 8
Ichsan Smith59K visualizações
Macromedia dreamweaver-8 por Kiki Saputra
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8
Kiki Saputra3.5K visualizações
Adobe dreamwaver por zhafdiana
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaver
zhafdiana18.3K visualizações
Training HTML por Yanwar Purnama
Training HTMLTraining HTML
Training HTML
Yanwar Purnama1.1K visualizações
Penggunaan html por Fajar Baskoro
Penggunaan htmlPenggunaan html
Penggunaan html
Fajar Baskoro3.5K visualizações
Pemrograman Web - HTML5 por KuliahKita
Pemrograman Web - HTML5Pemrograman Web - HTML5
Pemrograman Web - HTML5
KuliahKita712 visualizações
Cara membuat html (desma susanti) por Desma_susanti
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
Desma_susanti16.6K visualizações
Modul html por fajaralpindra
Modul htmlModul html
Modul html
fajaralpindra2.2K visualizações
Modul web programing por Nepriant Juragantv
Modul web programingModul web programing
Modul web programing
Nepriant Juragantv1.3K visualizações
Belajar php por Albertz Ace-Red
Belajar phpBelajar php
Belajar php
Albertz Ace-Red196 visualizações
Membuat desain website berbasis html dengan notepad por Ardiyanto Top
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepad
Ardiyanto Top12.6K visualizações
Belajar HTML: Apa Itu HTML? por Sahabat Coding
Belajar HTML: Apa Itu HTML?Belajar HTML: Apa Itu HTML?
Belajar HTML: Apa Itu HTML?
Sahabat Coding115 visualizações
Modul 2-form html-css por Fajar Baskoro
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
Fajar Baskoro3.5K visualizações
modul pemrograman web dengan dreamweaver, sql & php por Ismi Islamia
modul pemrograman web dengan dreamweaver, sql & phpmodul pemrograman web dengan dreamweaver, sql & php
modul pemrograman web dengan dreamweaver, sql & php
Ismi Islamia3.6K visualizações
Belajar html por Akhirnp
Belajar htmlBelajar html
Belajar html
Akhirnp1.5K visualizações
Modul webdesign por Nepriant Juragantv
Modul webdesignModul webdesign
Modul webdesign
Nepriant Juragantv1.9K visualizações
Modul html por Afwan Rusli
Modul htmlModul html
Modul html
Afwan Rusli2.1K visualizações
Cara mudah koneksi php dan mysql dengan database por Programmer and Design
Cara mudah koneksi php dan mysql dengan databaseCara mudah koneksi php dan mysql dengan database
Cara mudah koneksi php dan mysql dengan database
Programmer and Design16.3K visualizações

Similar a Pembinaan laman web peringkat permulaan

Proyek web html menggunakan notepad por
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
1K visualizações22 slides
Modul web programing por
Modul web programingModul web programing
Modul web programingFitra Sani
4.3K visualizações200 slides
pemrograman internet por
pemrograman internetpemrograman internet
pemrograman internetmafailmi
661 visualizações27 slides
Modul Web Programming dengan PHP dan MySQL por
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLeddie Ismantoe
5.5K visualizações91 slides
Belajar php por
Belajar phpBelajar php
Belajar phpHaswi Haswi
501 visualizações40 slides
Ilmuwebsite.com html css-dari_akar_ke_daun-libre por
Ilmuwebsite.com html css-dari_akar_ke_daun-libreIlmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libreUniska Lam
926 visualizações76 slides

Similar a Pembinaan laman web peringkat permulaan(20)

Proyek web html menggunakan notepad por Samsuri14
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri141K visualizações
Modul web programing por Fitra Sani
Modul web programingModul web programing
Modul web programing
Fitra Sani4.3K visualizações
pemrograman internet por mafailmi
pemrograman internetpemrograman internet
pemrograman internet
mafailmi661 visualizações
Modul Web Programming dengan PHP dan MySQL por eddie Ismantoe
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQL
eddie Ismantoe5.5K visualizações
Belajar php por Haswi Haswi
Belajar phpBelajar php
Belajar php
Haswi Haswi501 visualizações
Ilmuwebsite.com html css-dari_akar_ke_daun-libre por Uniska Lam
Ilmuwebsite.com html css-dari_akar_ke_daun-libreIlmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Uniska Lam926 visualizações
Ilmuwebsite.com html css-dari_akar_ke_daun por Hendi Alfiandi
Ilmuwebsite.com html css-dari_akar_ke_daunIlmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daun
Hendi Alfiandi629 visualizações
02 mengenal html por Amiroh S.Kom
02 mengenal html02 mengenal html
02 mengenal html
Amiroh S.Kom341 visualizações
Proyek web por Novita J Akerina
Proyek webProyek web
Proyek web
Novita J Akerina924 visualizações
9. b.. . . por vicky alhuda
9. b.. . .9. b.. . .
9. b.. . .
vicky alhuda284 visualizações
storyboard pemrograman web.pptx por FileArsip
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptx
FileArsip10 visualizações
MEDIA BELAJAR PENGANTAR HTML.pptx por ssuser71d74a
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
ssuser71d74a4 visualizações
File Structure, HTML & Supporting Languages.pptx por BeeOkee
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
BeeOkee1 visão
01 html por Amiroh S.Kom
01 html01 html
01 html
Amiroh S.Kom3.3K visualizações
Homepage untuk informasi dan komunikasi por Resa Firmansyah
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
Resa Firmansyah682 visualizações
Ujian tengah semester komputer terapan por nofayanties
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
nofayanties201 visualizações
Web por setianiayu
WebWeb
Web
setianiayu461 visualizações
Ujian tengah semester komputer terapan por M Paramananda
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
M Paramananda274 visualizações
Belajar html por MURROBI
Belajar htmlBelajar html
Belajar html
MURROBI226 visualizações

Mais de Dr. Vignes Gopal

Java codes output preliminary level por
Java codes output preliminary levelJava codes output preliminary level
Java codes output preliminary levelDr. Vignes Gopal
682 visualizações8 slides
Code book using spss por
Code book using spssCode book using spss
Code book using spssDr. Vignes Gopal
966 visualizações4 slides
Presentation slides preliminary discussions on solid waste management por
Presentation slides preliminary discussions on solid waste managementPresentation slides preliminary discussions on solid waste management
Presentation slides preliminary discussions on solid waste managementDr. Vignes Gopal
1.4K visualizações12 slides
Introduction to spss – part 1 por
Introduction to spss – part 1Introduction to spss – part 1
Introduction to spss – part 1Dr. Vignes Gopal
2K visualizações36 slides
Presentation acdec2013 por
Presentation acdec2013Presentation acdec2013
Presentation acdec2013Dr. Vignes Gopal
540 visualizações39 slides
Conference presentation sports conference 2013_vignes por
Conference presentation sports conference 2013_vignesConference presentation sports conference 2013_vignes
Conference presentation sports conference 2013_vignesDr. Vignes Gopal
298 visualizações8 slides

Mais de Dr. Vignes Gopal(20)

Java codes output preliminary level por Dr. Vignes Gopal
Java codes output preliminary levelJava codes output preliminary level
Java codes output preliminary level
Dr. Vignes Gopal682 visualizações
Code book using spss por Dr. Vignes Gopal
Code book using spssCode book using spss
Code book using spss
Dr. Vignes Gopal966 visualizações
Presentation slides preliminary discussions on solid waste management por Dr. Vignes Gopal
Presentation slides preliminary discussions on solid waste managementPresentation slides preliminary discussions on solid waste management
Presentation slides preliminary discussions on solid waste management
Dr. Vignes Gopal1.4K visualizações
Introduction to spss – part 1 por Dr. Vignes Gopal
Introduction to spss – part 1Introduction to spss – part 1
Introduction to spss – part 1
Dr. Vignes Gopal2K visualizações
Presentation acdec2013 por Dr. Vignes Gopal
Presentation acdec2013Presentation acdec2013
Presentation acdec2013
Dr. Vignes Gopal540 visualizações
Conference presentation sports conference 2013_vignes por Dr. Vignes Gopal
Conference presentation sports conference 2013_vignesConference presentation sports conference 2013_vignes
Conference presentation sports conference 2013_vignes
Dr. Vignes Gopal298 visualizações
Presentation 14 th malaysia_singapore forum_1 por Dr. Vignes Gopal
Presentation 14 th malaysia_singapore forum_1Presentation 14 th malaysia_singapore forum_1
Presentation 14 th malaysia_singapore forum_1
Dr. Vignes Gopal656 visualizações
Formula bab2 bab7_mikro___vignes[1]_edited_1 por Dr. Vignes Gopal
Formula bab2 bab7_mikro___vignes[1]_edited_1Formula bab2 bab7_mikro___vignes[1]_edited_1
Formula bab2 bab7_mikro___vignes[1]_edited_1
Dr. Vignes Gopal51.2K visualizações
Getting started to r por Dr. Vignes Gopal
Getting  started  to rGetting  started  to r
Getting started to r
Dr. Vignes Gopal461 visualizações
Isi indexed journals demography por Dr. Vignes Gopal
Isi indexed journals demographyIsi indexed journals demography
Isi indexed journals demography
Dr. Vignes Gopal443 visualizações
Isi indexed journals economics por Dr. Vignes Gopal
Isi indexed journals economicsIsi indexed journals economics
Isi indexed journals economics
Dr. Vignes Gopal2.5K visualizações
Flow of statistical analysis full version por Dr. Vignes Gopal
Flow of  statistical  analysis full versionFlow of  statistical  analysis full version
Flow of statistical analysis full version
Dr. Vignes Gopal1.4K visualizações
Flow of questionnaire por Dr. Vignes Gopal
Flow of questionnaireFlow of questionnaire
Flow of questionnaire
Dr. Vignes Gopal2K visualizações
Flow of ordinary research process por Dr. Vignes Gopal
Flow of ordinary research processFlow of ordinary research process
Flow of ordinary research process
Dr. Vignes Gopal563 visualizações
Mikroekonomi ulangkaji_STPM por Dr. Vignes Gopal
Mikroekonomi ulangkaji_STPMMikroekonomi ulangkaji_STPM
Mikroekonomi ulangkaji_STPM
Dr. Vignes Gopal4.7K visualizações
Latihan bab 3 mikroekonomi por Dr. Vignes Gopal
Latihan bab 3 mikroekonomiLatihan bab 3 mikroekonomi
Latihan bab 3 mikroekonomi
Dr. Vignes Gopal3.1K visualizações
Crash course stpm por Dr. Vignes Gopal
Crash course stpmCrash course stpm
Crash course stpm
Dr. Vignes Gopal299 visualizações
Crash course bab2 bab4_stpm_Mikroekonomi_STPM por Dr. Vignes Gopal
Crash course bab2 bab4_stpm_Mikroekonomi_STPMCrash course bab2 bab4_stpm_Mikroekonomi_STPM
Crash course bab2 bab4_stpm_Mikroekonomi_STPM
Dr. Vignes Gopal299 visualizações
Course outline mikroekonomi_STPM por Dr. Vignes Gopal
Course   outline mikroekonomi_STPMCourse   outline mikroekonomi_STPM
Course outline mikroekonomi_STPM
Dr. Vignes Gopal618 visualizações
Selected portion of Stata commands por Dr. Vignes Gopal
Selected portion of Stata commandsSelected portion of Stata commands
Selected portion of Stata commands
Dr. Vignes Gopal744 visualizações

Último

3. LKPD STATISTIKA.pdf por
3. LKPD STATISTIKA.pdf3. LKPD STATISTIKA.pdf
3. LKPD STATISTIKA.pdfazizdesi
14 visualizações30 slides
Katalog Penerbit Baca por
Katalog Penerbit BacaKatalog Penerbit Baca
Katalog Penerbit Bacapenerbitbaca
62 visualizações91 slides
AKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptx por
AKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptxAKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptx
AKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptxFitriani Nurfadillah
36 visualizações11 slides
TUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptx por
TUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptxTUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptx
TUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptxNataliaApricaAnwar
42 visualizações9 slides
TugasPPT6_NormanAdjiPangestu _E1G022079.pptx por
TugasPPT6_NormanAdjiPangestu _E1G022079.pptxTugasPPT6_NormanAdjiPangestu _E1G022079.pptx
TugasPPT6_NormanAdjiPangestu _E1G022079.pptxNormanAdji
19 visualizações9 slides
SK PENGAWAS UJIAN SEKOLAH.doc por
SK PENGAWAS UJIAN SEKOLAH.docSK PENGAWAS UJIAN SEKOLAH.doc
SK PENGAWAS UJIAN SEKOLAH.docEMILAANGGRAINI1
39 visualizações3 slides

Último(20)

3. LKPD STATISTIKA.pdf por azizdesi
3. LKPD STATISTIKA.pdf3. LKPD STATISTIKA.pdf
3. LKPD STATISTIKA.pdf
azizdesi14 visualizações
Katalog Penerbit Baca por penerbitbaca
Katalog Penerbit BacaKatalog Penerbit Baca
Katalog Penerbit Baca
penerbitbaca62 visualizações
AKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptx por Fitriani Nurfadillah
AKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptxAKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptx
AKSI NYATA PERENCANAAN PEMBELAJARAN SMP.pptx
Fitriani Nurfadillah36 visualizações
TUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptx por NataliaApricaAnwar
TUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptxTUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptx
TUGAS PPT 6_NATALIA APRICA ANWAR_E1G022075.pptx
NataliaApricaAnwar42 visualizações
TugasPPT6_NormanAdjiPangestu _E1G022079.pptx por NormanAdji
TugasPPT6_NormanAdjiPangestu _E1G022079.pptxTugasPPT6_NormanAdjiPangestu _E1G022079.pptx
TugasPPT6_NormanAdjiPangestu _E1G022079.pptx
NormanAdji19 visualizações
SK PENGAWAS UJIAN SEKOLAH.doc por EMILAANGGRAINI1
SK PENGAWAS UJIAN SEKOLAH.docSK PENGAWAS UJIAN SEKOLAH.doc
SK PENGAWAS UJIAN SEKOLAH.doc
EMILAANGGRAINI139 visualizações
PELAKSANAAN & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045". por Kanaidi ken
PELAKSANAAN  & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".PELAKSANAAN  & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".
PELAKSANAAN & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".
Kanaidi ken83 visualizações
Fajar Saputra (E1G022057).pptx por FajarSaputra57
Fajar Saputra (E1G022057).pptxFajar Saputra (E1G022057).pptx
Fajar Saputra (E1G022057).pptx
FajarSaputra5715 visualizações
Latihan 7_M.Ilham Raditya_E1G020017..pptx por MIlhamRaditya
Latihan 7_M.Ilham Raditya_E1G020017..pptxLatihan 7_M.Ilham Raditya_E1G020017..pptx
Latihan 7_M.Ilham Raditya_E1G020017..pptx
MIlhamRaditya38 visualizações
MATERI LHO X AYU.pptx por DelviaAndrini1
MATERI LHO X AYU.pptxMATERI LHO X AYU.pptx
MATERI LHO X AYU.pptx
DelviaAndrini128 visualizações
PPT PENKOM ALVIN.pptx por Alfin61471
PPT PENKOM ALVIN.pptxPPT PENKOM ALVIN.pptx
PPT PENKOM ALVIN.pptx
Alfin6147112 visualizações
Bimtek Pencegahan Kekerasan dalam Rumah Tangga.pdf por Irawan Setyabudi
Bimtek Pencegahan Kekerasan dalam Rumah Tangga.pdfBimtek Pencegahan Kekerasan dalam Rumah Tangga.pdf
Bimtek Pencegahan Kekerasan dalam Rumah Tangga.pdf
Irawan Setyabudi30 visualizações
KIKI PRATIWI_ E1G022035.pptx por KikiPratiwi11
KIKI PRATIWI_ E1G022035.pptxKIKI PRATIWI_ E1G022035.pptx
KIKI PRATIWI_ E1G022035.pptx
KikiPratiwi1112 visualizações
ppt biologi katabolisme lemak dan protein pptx por raraksm12
ppt biologi katabolisme  lemak dan protein pptxppt biologi katabolisme  lemak dan protein pptx
ppt biologi katabolisme lemak dan protein pptx
raraksm1269 visualizações
Panduan Praktikum Administrasi Sistem Jaringan Edisi 2 por I Putu Hariyadi
Panduan Praktikum Administrasi Sistem Jaringan Edisi 2Panduan Praktikum Administrasi Sistem Jaringan Edisi 2
Panduan Praktikum Administrasi Sistem Jaringan Edisi 2
I Putu Hariyadi23 visualizações
Permendikbudristek Nomor 30 Tahun 2021.pdf por Irawan Setyabudi
Permendikbudristek Nomor 30 Tahun 2021.pdfPermendikbudristek Nomor 30 Tahun 2021.pdf
Permendikbudristek Nomor 30 Tahun 2021.pdf
Irawan Setyabudi34 visualizações
SK Satgas PPKS.pdf por Irawan Setyabudi
SK Satgas PPKS.pdfSK Satgas PPKS.pdf
SK Satgas PPKS.pdf
Irawan Setyabudi39 visualizações
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ... por Kanaidi ken
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...
Kanaidi ken26 visualizações
tugas PPT_Chita putri_E1G022007.pptx por chitaputrir30
tugas PPT_Chita putri_E1G022007.pptxtugas PPT_Chita putri_E1G022007.pptx
tugas PPT_Chita putri_E1G022007.pptx
chitaputrir3018 visualizações

Pembinaan laman web peringkat permulaan

  • 1. 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.
  • 2. Gambarajah1: Microsoft Frontpage 2003 Gambar rajah 2 : Window Notepad
  • 3. 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.
  • 4. 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:-
  • 5. <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>
  • 6. <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 2 c) h 3 d) h 4 e) h 5
  • 7. 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
  • 8. 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.
  • 9. 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>
  • 10. 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
  • 11. 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()'">
  • 12. 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>
  • 13. *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:-
  • 14. <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>
  • 15. <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>
  • 16. 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">
  • 17. 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
  • 18. 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.
  • 19. 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>
  • 20. <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;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:- Kod 2 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini;- Kod 3
  • 21. <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya pada paparan internet explorer dapat dilihat seperti di bawah:- Kod 4 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:- Kod 5 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr>
  • 22. <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td. </tr> </table> Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:- Kod 6 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <tr> <td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya pada paparan internet explorer seperti di bawah:-
  • 23. Kod 7 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya dapat dlihat pada paparan internet explorer seperti di bawah ini:- Kod 8 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr>
  • 24. </table> Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:- Kod 9 <table border="1"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td colspan=2>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> </table> Kesannya dapat dilihat pada paparan internet explorer seperti di bawah ini:- Kod 10 <table border="1"> <tr> <td rowspan= 2>&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp</td> </tr> </table>
  • 25. Kesannya dapat dilihat pada paparan internet explorer seperi di bawah ini:- Kod 11 <table border="1"> <tr> <td rowspan=2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</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>
  • 26. - 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>
  • 27. * 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
  • 28. <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:-
  • 29. 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>
  • 30. </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>
  • 31. 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>
  • 32. 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