Kuasai Dreamweaver - Aplikasi Pembangun Laman Web

Monday, March 12, 2012

Pembangunan Laman Web dengan HTML dan CSS

Walaupun HTML sahaja sudah memadai untuk pembangunan antaramuka laman web, terdapat beberapa masalah yang sukar diatasi bagi menghasilkan antaramuka web lebih baik. Bagi mengatasi kekurangan ini, CSS atau Cascading Style Sheet telah diperkenalkan.

Berbeza dengan HTML yang banyak menggunakan penanda (tag) TABLE dan FRAMESET bagi menghasilkan rekaletak (layout) web, CSS biasanya akan menggunakan tag DIV (division) bagi menghasilkan rekaletak web. Sebagai contoh, bagi menghasilkan rekaletak seperti di bawah, kod aturcara HTML akan digabungkan dengan CSS melalui penggunaan tag DIV:

Kod HTML:

<html>

<head>

<title>Laman Web Syarikat Pingu</title>

</head>

<body>

banner di sini

</div>

menu di sini

</div>

isi web di sini

</div>

hakcipta di sini

</div>

</body>

</html>

Kod CSS

#kotak-utama{

width:900px;

margin:0 auto;

}

#header{

width:100%;

height:150px;

}

#menu{

width:100%;

height:40px;

}

#content{

width:100%;

min-height:250px;

}

#footer{

width:100%;

height:100px;

}

Bagaimana CSS boleh digunakan?

CSS boleh digunakan bersama-sama HTML melalui 3 kaedah berikut:

Pengaturcaraan inline
Pengaturcaraan internal
Pengaturcaraan external

Contoh aturcara CSS secara inline:

Kandungan laman web ini akan disetkan dengan

warna latar merah dan teks berwarna putih melalui

teknik aturcara css secara inline pada tag BODY.

Melalui kaedah ini, CSS akan dipanggil menggunakan

pembolehubah bernama style.

</body>

Contoh aturcara secara internal:

<style>

body{

background:#ff0000;

color:#fff;

}

</style>

<body>

Kandungan laman web ini akan disetkan dengan

warna latar merah dan teks berwarna putih melalui

teknik aturcara css secara INTERNAL.

Melalui kaedah ini, CSS akan dipanggil menggunakan

penanda (tag) STYLE.

</body>

Contoh aturcara secara external:

external.html

<body>

Kandungan laman web ini akan disetkan dengan

warna latar merah dan teks berwarna putih melalui

teknik aturcara css secara EXTERNAL.

Melalui kaedah ini, fail CSS yang berasingan (style2.css)

akan dipanggil menggunakan penanda (tag) LINK.

</body>

style2.css

body{

background:#ff0000;

color:#fff;

}

Baca selanjutnya ...

Monday, February 27, 2012

Kenali HTML

Kenapa perlu belajar HTML?

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:

1) Untuk latihan ini, buka perisian Notepad

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.

Berikut adalah paparan yang akan kelihatan:

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>

</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>

</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>

</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 ”.

12) Masukkan kod ni:

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>

Baca selanjutnya ...

Bahasa aturcara web

Ada beberapa bahasa aturcara yang boleh kita gunakan untuk membina laman web. Secara ringkasnya, bahasa yang boleh kita guna untuk membangunkan laman web adalah: HTML, ASP, PHP, ASP.Net, Java, dan XML.

HTML?

Secara umum, HTML atau Hyper Text Markup Language adalah bahasa utama yang membina kerangka ataupun struktur laman web. Mudah untuk mengenali HTML. Kod HTML lazimnya bermula dengan tanda (atau tag) <HTML> dan ditutup tag <HTML>. <HTML> dan <HTML>?

Lihat contoh di bawah:

<HTML>

   <HEAD>
      <TITLE>Tajuk Atas Palang</TITLE>
   <HEAD>

   <BODY>
      Isi kandungan
   <BODY>

<HTML>

Untuk membina website dengan HTML, kod aturcara mesti dimulakan dengan tag pembuka <HTML> dan penutup <HTML>. Aturcara lain pula mesti dimasukkan di antara (di dalam) keduanya. Tanda '/' mesti digunakan untuk menutup setiap tag.

Jika demikian, mengapa pula ada bahasa-bahasa lain seperti di atas tadi? Fungsi dan keupayaan HTML sebenarnya terhad. Oleh itu, untuk membangunkan laman web yang lebih dinamik, kod aturcara yang lain (seperti PHP) perlu digunakan dalam laman web.

PHP?

PHP adalah singkatan untuk Personal Home Page. Berikutan perkembangan fungsi dan keupayaan kod aturcara ini, PHP kini telah dikenali sebagai PHP Hypertext Preprocessor. Tidak sukar untuk mengenali PHP. Lihat tanda <? dan ?>. Seperti HTML, PHP boleh dipanggil menggunakan penanda <? dan ditutup penanda ?>.

Lihat contoh di bawah:

<?
Echo ("Teks ni akan dipaparkan pada skrin web browser");
?>

Aturcara PHP di atas ni akan memaparkan teks Teks ni akan dipaparkan pada skrin web browser pada pelayar web. PHP banyak digunakan untuk pembangunan laman web bersifat dinamik yang melibatkan capaian data berpusat dan manipulasi data yang rumit. Banyak laman web terurus masa kini yang menggunakan PHP sebagai bahasa kod utamanya. Sebelum munculnya PHP, kod digelar ASP adalah lebih popular. ASP?

ASP

Active Server Pages (ASP) adalah kod aturcara web yang telah diperkenalkan oleh Microsoft. Seperti PHP, kod ASP banyak digunakan untuk menghasilkan laman web bersifat dinamik. Kod ASP boleh dimasukkan ke dalam aturcara web menggunakan tag <% dan tanda tutup guna %> , contohnya:

<%@ Language=VBScript %>;
<% Option Explicit %>;

<html>
   <head>
      <title>(Type a title for your page here)</title>
   </head>
   <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
      <%Dim msgmsg="Hello World"Response.Write msg%>
   </body>
</html>

Mengapa kod HTML masih digunakan dalam contoh aturcara ASP di atas? Sebenarnya kod ASP tadi hanya digunakan untuk masukkan fungsi-fungsi tambahan yang lebih canggih, manakala kod HTML pula masih digunakan untuk bina kerangka laman web tersebut.

Bagi menghasilkan laman web yang lebih canggih dan selamat, kod aturcara yang lebih baik seperti platform .NET dan Java turut digunakan. Fungsi kod ASP yang agak terhad kini telah digantikan dengan hadirnya ASP.net. Kod PHP juga telah dikemaskini untuk menyokong aturcara berorientasikan objek (OOP - Object Oriented Programming).

CSS

CSS atau Cascading Style Sheet adalah kod aturcara tambahan yang digunakan untuk menampung kelemahan HTML dari sudut pembangunan antaramuka web. Berbeza dengan kod PHP, ASP, .NET dan Java yang digunakan untuk pembangunan sistem canggih dan capaian pangkalan data terpusat (database), CSS digunakan bagi membantu pembangun laman web menghasilkan rekaan grafik laman yang lebih baik.

CSS boleh dianggap sebagai pelengkap kepada kod HTML yang bukan sahaja memudahkan pembinaan kerangka laman, malah memudahkan pembangun untuk menghasilkan antaramuka (design) yang dahulunya mustahil menggunakan HTML semata-mata.

Kod CSS boleh dipanggil ke dalam laman web menggunakan 3 kaedah*: internal (dimasukkan terus menggunakan tag CSS), external (disimpan sebagai fail CSS berasingan), dan inline (dikodkan ke dalam tag HTML sedia ada)

Nota:
* Perkara ini akan dibincang dalam artikel selanjutnya

Baca selanjutnya ...