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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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:-
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.
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).
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 :-
<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:-
<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.
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:-
Kesannya pada paparan internet explorer dapat dilihat seperti di bawah ini:-
Kod 6
<table border="1"><tr> <td>  </td> <td>  </td><tr> <td colspan=2>  </td> <td>  </td><tr> <td>  </td> <td>  </td> <tr> <td>  </td> <td>  </td></tr></table> Kesannya pada paparan internet explorer seperti di bawah:-
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.
* 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:-
<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