Hyper Text Markup Language adalah bahasa asas yang membina kerangka sesebuah laman web. Oleh kerana pembangunan laman web menggunakan kaedah kod (coding) adalah amat perlahan dan sukar, ramai pembangun masa kini yang lebih gemar menggunakan aplikasi penjana kod otomatik yang memudahkan pembangunan website semudah copy, paste, click, dan drag.
Penjana kod atau perisian IDE (Integrated Development Environment) ini boleh dimuat turun secara percuma atau dibeli melalui internet. Antaranya yang popular (atau pernah popular) adalah perisian Dreamweaver, Frontpage, NVU (kini digelar Kompozer), dan Blue Fish.
 |
| Gambarajah 1: Dreamweaver adalah salah satu contoh perisian IDE yang memudahkan pembangunan laman web |
Walaupun perisian IDE ini memudahkan dan mempercepatkan pembangunan laman web, ada masanya kod-kod yang dijana akan mengalami kesilapan ataupun dijana secara berulang (redundant). Ini adalah masalah biasa bagi perisian IDE. Oleh itu, sedikit kemahiran mengenai pengaturcaraan akan membantu kita untuk menjejaki masalah yang mungkin timbul dengan lebih mudah dan menjimatkan masa pembangunan.
Mula Belajar HTML
Sesi pembelajaran ni akan dimudahkan lagi menggunakan contoh aturcara dan paparan hasilnya. Lihat aturcara di bawah:
dan masukkan kod di atas
2) Klik menu File > Save As
3) Beri nama (seperti 'kod1.html'), pilih All Files dan simpan fail di Desktop
4) Ikon fail kod1.html seperti di bawah akan terhasil di desktop. Klik ikon ini (2 klik) dan lihat hasilnya.
Bagaimana pula untuk mendapatkan hasil seperti di bawah?
5) Tambah kod aturcara :
<body bgcolor=#fff000 >
dan
<font color=#ff0000> Tajuk utama </font>
Bagaimana untuk mendapatkan hasil seperti di bawah pula?
Senarai list boleh dibuat menggunakan tag <ol> (order list) untuk susunan menggunakan nombor, ataupun tag <ul> (unorder list) untuk susunan tanpa nombor.
6) Untuk
contoh di atas, masukkan kod:
<ol>
<li>Beras
siam
<li>Minyak sapi
<li>Rempah
<li>Sayuran
</ol>
Bagi menghasilkan paparan yang lebih menarik, elemen media seperti gambar juga boleh dimasukkan ke dalam laman web ini.
Tag <img> digunakan untuk memasukkan gambar ke
dalam laman web. Untuk contoh ni, kita akan memasukkan gambar " nasiminyak.jpg " ke dalam laman web ini.
7) Sebagai latihan, salin (copy) mana-mana fail gambar jenis jpeg (.jpg) berhampiran fail laman web yang
kita bina, kemudian ubah nama (rename) fail tersebut dengan nama nasiminyak.
8) Tambah tag <img src=nasiminyak.jpg> seperti di bawah:
Bagaimana pula untuk menghasilkan paparan seperti di bawah ini?
Untuk menghasilkan paparan seperti di atas, kita akan gunakan bantuan tag <table>.
9) Masukkan senarai bahan dan gambar di dalam table ini. Berikut adalah kodnya:
<table>
<tr>
<td>Bahan-bahan
<ol>
<li>Beras
siam
<li>Minyak sapi
<li>Rempah
<li>Sayuran
</ol>
</td>
<td>
<img
src=nasiminyak.jpg>
</td>
</tr>
</table>
Berikut adalah lakarannya dalam bentuk grafik:
Penerangan:
Untuk hasilkan 1 Row dengan 2 Columns, tag <tr> (table row) dan <td> (table data / column) perlu dimasukkan ke dalam tag <table>
<table>
<tr> <!---------------------------------------- Row 1-->
<td>Data 1</td> <!-------- Column
1 -->
<td>Data 2</td> <!-------- Column
2 -->
</tr> <!--------------------------------------- Row 1-->
</table>
Kod ni bermaksud 2 Column berada dalam
1 Row
Gantikan Data 1 dengan Senarai Bahan
dan gantikan Data 2 dengan gambar Nasiminyak
Berikut adalah paparan kod setelah dikemaskini:
Bagaimana pula untuk mengubah saiz gambar dan saiz column bagi menghasilkan paparan yang lebih baik seperti di bawah?
(gambar lebih kecil) (ruang/saiz column lebih besar)
Gunakan tambahan kod width (lebar) dan height (tinggi) pada saiz <img> ,dan kod width (lebar) pada saiz Column.
10) Tambahkan kod berikut:
<td
width=150>Bahan-bahan
<ol>
<li>Beras siam
<li>Minyak
sapi
<li>Rempah
<li>Sayuran
</ol>
</td>
<td>
<img
src=nasiminyak.jpg width=150 height=120>
</td>
Berikut adalah gambaran bagi hasil ubahsuai di atas:
Selain menjadi penyeri atau pelengkap sesebuah laman web, media gambar juga sebenarnya boleh dijadikan hiasan latar bagi penampilan web yang lebih baik. Berikut adalah contoh paparan bagi laman web yang menggunakan gambar sebagai hiasan latar belakangnya:
Bagi membolehkan gambar digunakan
sebagai latar belakang (background), kod "background=nama_gambar" perlu digunakan.
11) Untuk contoh ni, salin (copy) mana-mana fail gambar jpeg (.jpg) dan letakkan sebelah fail laman web. Ubah nama fail gambar ni kepada “ corak1.jpg ”.
11) Untuk contoh ni, salin (copy) mana-mana fail gambar jpeg (.jpg) dan letakkan sebelah fail laman web. Ubah nama fail gambar ni kepada “ corak1.jpg ”.
12) Masukkan kod ni:
<body background=corak1.jpg>
Kurang menarik? Menggunakan tag <marquee>, kita boleh menghasilkan animasi teks yang agak baik bagi laman web yang dibina. Marquee adalah satu kaedah yang boleh digunakan bagi membolehkan teks (bahkan gambar) untuk digerakkan pada kedudukan tertentu dalam sela masa yang boleh ditetapkan.
13) Paparan di atas sebagai contoh boleh dihasilkan dengan memasukkan aturcara berikut:
<marquee>Hidangan Melayu Malaysia</marquee>
No comments:
Post a Comment