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>
                              <link type="text/css" rel="stylesheet" href="style.css" />
               </head>
               <body>
                              <div id="kotak-utama">
                                             <div id="header">
                                                            banner di sini
                                             </div>
                                             <div id="menu">
                                                            menu di sini
                                             </div>
                                             <div id="content">
                                                            isi web di sini
                                             </div>
                                             <div id="footer">
                                                            hakcipta di sini
                                             </div>
                              </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:
  1. Pengaturcaraan inline
  2. Pengaturcaraan internal
  3. Pengaturcaraan external
Contoh aturcara CSS secara inline:

<body style="background:#ff0000;color:#fff;">
               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

<link type="text/css" rel="stylesheet" href="style2.css" />
<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 ...