Bahasa Penanda Hiperteks (HTML)/Lembaran Gaya Lata

Sehingga kini kita dapat melihat bagaimana cara membahagikan teks ke dalam perenggan serta bagaimana membuat pengepala bahagian dengan HTML. Sementara HTML membolehkan kita untuk memberi bentuk atau struktur kepada dokumen-dokumen kita, dalam hal penampilan dokumen, HTML hanya menyediakan kawalan yang terbatas terhadap penampilan tersebut. Lembaran Gaya Lata atau Cascading Style Sheets (CSS) merupakan bahasa yang memerikan cara sesuatu dokumen itu dipaparkan. Anda dapat mengguna CSS bagi mengubah penampilan dokumen-dokumen HTML anda.

Bahagian ini hanya memberikan pengenalan kepada penggayaan ataupun pencorakan HTML dengan CSS. Subjek CSS sendiri dibincang dengan lebih terperinci dalam wikibuku berjudul Lembaran Gaya Lata.

TODO	Nota penterjemah: Sepanjang buku ini, istilah yang digunakan ialah CSS dan tidak "Lembaran Gaya Lata", kerana CSS istilah kebiasaan.

Apa Tugas CSS?

CSS dapat melakukan tiga fungsi:

Menetapkan fon teks sesebuah halaman
Menetapkan sebuah lapisan dan menetapkan tempat letaknya pada halaman
Mengubah tag HTML

Ini ialah halaman contoh daripada Wikipedia, yang digunakan dalam bab Perenggan dan Pengepala.

Kita akan pinjam beberapa perenggan dan gambar daripada rencana pilihan, Ular, di Wikipedia. Sila maklum bahawa teks rencana hanya digunakan sebagai contoh, justeru tidak mengikut sususan di Wikipedia.

Tanpa CSS, paparannya kelihatan seperti di bawah:

Ular

Daripada Wikipedia, ensiklopedia bebas.

Ular merupakan reptilia karnivor yang panjang dan tidak berkaki dalam suborder Serpentes. Seperti semua spesies Squamata, ular merupakan vertebrat amniot ektoterma yang berkulitkan sisik yang bertindan-tindih. Kebanyakan spesies ular mempunyai tengkorak yang lebih banyak sendinya berbanding leluhur cicaknya supaya mudah untuk menelan mangsa yang lebih besar daripada kepalanya dengan rahang yang amat mudah gerak. Untuk menampung badan ular yang sempit, organ-organ yang berpasangan (seperti ginjal) tersusun secara berikut-ikut, bukan bersebelahan, apalagi kebanyakan ular hanya mempunyai sebatang paru-paru. Sesetengah spesies mempunyai girdel pelvis dengan sepasang cakar vestij di sebelah kloaka. Juga terdapat jenis reptilia yang tidak berkaki tetapi bukan ular, iaitu cicak tanpa kaki; bezanya adalah, ular tiada kelopak mata dan telinga luaran.

Evolusi

Rekod fosil ular agak berkurangan kerana rangka ular biasanya kecil dan rapuh, oleh itu jarang mengalami pemfosilan. Fosil-fosil yang sedia ada boleh dicamkan sebagai ular (biarpun sering memelihara kaki belakang) mula-mula muncul dalam rekod fosil pada Usia Kapur. Fosil-fosil ular terawal yang diketahui datang dari tapak-tapak di Utah dan Algeria, masing-masing diwakili oleh genus Coniophis dan Lapparentophis. Tapak-tapak fosil ini dipercayai bertarikh pada kala Albia atau Senomania pada akhir Zaman Batu Kapur, sekitar 112–94 juta tahun dahulu. Bagaimanapun, terdapat satu fosil dari tapak di Algeria yang dikatakan lebih lama, iaitu mungkin seawal kala Aptia, iaitu 125–112 juta tahun dahulu.

Saiz

Ular Titanoboa cerrejonensis yang kini pupus didapati mencapai panjang 12–15 meter (39–49 ka). Sebagai perbandingan, ular terbesar yang masih wujud ialah ular sawa yang menjangkau kepanjangan 9 meter (30 ka), dan anakonda yang berukuran sekitar 7.5 meter (25 ka) dan dianggap sebagai ular yang paling berat di Bumi.

Sebaliknya, ular terkecil yang masih wujud ialah Leptotyphlops carlae, dengan panjang sekitar 10 sentimeter (4 in). Kebanyakan ular merupakan haiwan yang agak kecil, dengan panjang kira-kira 1 meter.

Bisa

Ular tedung, ular kapak, dan spesies-spesies yang sebagainya menggunakan bisa untuk melumpuhkan atau membunuh mangsa. Bisa itu merupakan air liur terubah suai yang disampaikan melalui siungnya. Siung ular berbisa yang "maju" seperti ular kapak dan ular tedung berongga untuk menyuntikkan bisa dengan lebih berkesan, sementara siung ular bersiung belakang seperti Dispholidus typus sekadar mempunyai alur di hujung depan untuk menyalurkan bisa ke dalam luka. Keberkesanan bisa ular lazimnya tertakluk pada spesies mangsa—peranannya dalam pertahanan diri sekadar sampingan.

Dengan menambah lembaran gaya, penampilan rencana yang menggunakan teks yang sama boleh ditukar kepada:

Ular

Daripada Wikipedia, ensiklopedia bebas.

Ular merupakan reptilia karnivor yang panjang dan tidak berkaki dalam suborder Serpentes. Seperti semua spesies Squamata, ular merupakan vertebrat amniot ektoterma yang berkulitkan sisik yang bertindan-tindih. Kebanyakan spesies ular mempunyai tengkorak yang lebih banyak sendinya berbanding leluhur cicaknya supaya mudah untuk menelan mangsa yang lebih besar daripada kepalanya dengan rahang yang amat mudah gerak. Untuk menampung badan ular yang sempit, organ-organ yang berpasangan (seperti ginjal) tersusun secara berikut-ikut, bukan bersebelahan, apalagi kebanyakan ular hanya mempunyai sebatang paru-paru. Sesetengah spesies mempunyai girdel pelvis dengan sepasang cakar vestij di sebelah kloaka. Juga terdapat jenis reptilia yang tidak berkaki tetapi bukan ular, iaitu cicak tanpa kaki; bezanya adalah, ular tiada kelopak mata dan telinga luaran.

Evolusi

Rekod fosil ular agak berkurangan kerana rangka ular biasanya kecil dan rapuh, oleh itu jarang mengalami pemfosilan. Fosil-fosil yang sedia ada boleh dicamkan sebagai ular (biarpun sering memelihara kaki belakang) mula-mula muncul dalam rekod fosil pada Usia Kapur. Fosil-fosil ular terawal yang diketahui datang dari tapak-tapak di Utah dan Algeria, masing-masing diwakili oleh genus Coniophis dan Lapparentophis. Tapak-tapak fosil ini dipercayai bertarikh pada kala Albia atau Senomania pada akhir Zaman Batu Kapur, sekitar 112–94 juta tahun dahulu. Bagaimanapun, terdapat satu fosil dari tapak di Algeria yang dikatakan lebih lama, iaitu mungkin seawal kala Aptia, iaitu 125–112 juta tahun dahulu.

Saiz

Ular Titanoboa cerrejonensis yang kini pupus didapati mencapai panjang 12–15 meter (39–49 ka). Sebagai perbandingan, ular terbesar yang masih wujud ialah ular sawa yang menjangkau kepanjangan 9 meter (30 ka), dan anakonda yang berukuran sekitar 7.5 meter (25 ka) dan dianggap sebagai ular yang paling berat di Bumi.

Sebaliknya, ular terkecil yang masih wujud ialah Leptotyphlops carlae, dengan panjang sekitar 10 sentimeter (4 in). Kebanyakan ular merupakan haiwan yang agak kecil, dengan panjang kira-kira 1 meter.

Bisa

Ular tedung, ular kapak, dan spesies-spesies yang sebagainya menggunakan bisa untuk melumpuhkan atau membunuh mangsa. Bisa itu merupakan air liur terubah suai yang disampaikan melalui siungnya. Siung ular berbisa yang "maju" seperti ular kapak dan ular tedung berongga untuk menyuntikkan bisa dengan lebih berkesan, sementara siung ular bersiung belakang seperti Dispholidus typus sekadar mempunyai alur di hujung depan untuk menyalurkan bisa ke dalam luka. Keberkesanan bisa ular lazimnya tertakluk pada spesies mangsa—peranannya dalam pertahanan diri sekadar sampingan.

Bagaimana Mahu Menambah Lembaran CSS

CSS dapat diletakkan di dalam dokumen HTML itu sendiri ataupun dipautkan ke dokumen HTML tersebut. CSS lazimnya disimpan berasingan daripada dokumen HTML. Ini akan membolehkan lembaran gaya yang sama digunakan pada dokumen-dokumen berlainan. Unsur link digunakan bagi mengenakan peraturan CSS pada sesebuah dokumen.

Sintaks asas berupa:

    <link rel="stylesheet" type="text/css" href="gaya.css">

di mana gaya.css ialah URL lembaran gaya.

CSS Dalam Dokumen HTML

Sebelum kita melihat penggunaan CSS dari fail luaran, mari kita lihat bagaimana mahu menulis peraturan CSS dalam dokumen HTML itu sendiri:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ms">
  <head>
  <title>Contoh Lembaran Gaya</title>
  <style type="text/css">
   .teksBesar { font-family:sans-serif;
               font-weight:bold;
               font-style:italic;
               font-size:30px;
               color:blue;}

   .teksHijau { color:green;
                font-weight:normal;}

   .teksHalus { font-size:8px;
                font-style:normal;}
   </style>
  </head>
  
  <body>
  Ini teks biasa

  <p><span class="teksBesar">Ini teks besar</span></p>
  <p><span class="teksHijau">Ini teks berwarna hijau</span></p>
  <p><span class="teksHalus">Ini teks halus</span></p>
  </body>
 </html>

Dokumen di atas akan dipaparkan seperti di bawah:

Ini teks biasa

Ini teks besar

Ini teks berwarna hijau

Ini teks halus

CSS Dalam Fail Luaran

Seperti dikatakan di atas, CSS lazimnya diletakkan dalam fail berasingan daripada dokumen HTML. Fail CSS buat contoh rencana di atas mengandungi peraturan-peraturan berikut:

body {
  background:cornsilk;
  color:#000;
  font-family:cursive
}

h1 {
  color:white;
  background-color:darkblue;
  font-size:1.2em;
  font-weight:bold;
  margin:0 1.0em;
}

h2 {
  text-align:center;
  font-size:1em;
  background-color:lightblue;
  color:white;
  font-weight:bold;
  margin:1em 0 0
}

p {
  text-indent:25px;
  text-align:justify;
  margin:0
}

Simpan ini sebagai fail ular.css.

Dokumen HTML yang mengandungi pautan ke fail CSS diberikan di bawah. Simpan dokumen ini sebagai fail ular2.html dalam direktori yang sama dengan fail CSS (ular.css) anda.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ms">
  <head>
    <title>Ular</title>
    <link rel="stylesheet" type="text/css" href="ular.css">
  </head>
  <body>
    <h1>Ular</h1>
    <p>Daripada Wikipedia, ensiklopedia bebas.</p>
     
    <p><img src="http://commons.wikimedia.org/wiki/File%3ARed_milk_snake.JPG"> Ular merupakan 
reptilia  karnivor yang panjang dan tidak berkaki dalam suborder Serpentes. 
Seperti semua spesies Squamata, ular merupakan vertebrat amniot ektoterma 
yang berkulitkan sisik yang bertindan-tindih. Kebanyakan spesies ular mempunyai 
tengkorak yang lebih banyak sendinya berbanding leluhur cicaknya supaya mudah 
untuk menelan mangsa yang lebih besar daripada kepalanya dengan rahang yang 
amat mudah gerak. Untuk menampung badan ular yang sempit, organ-organ yang 
berpasangan (seperti ginjal) tersusun secara berikut-ikut, bukan bersebelahan, 
apalagi kebanyakan ular hanya mempunyai sebatang paru-paru. Sesetengah spesies 
mempunyai girdel pelvis dengan sepasang cakar vestij di sebelah kloaka. Juga 
terdapat jenis reptilia yang tidak berkaki tetapi bukan ular, iaitu cicak tanpa kaki; 
bezanya adalah, ular tiada kelopak mata dan telinga luaran.
    </p>
    <h2>Evolusi</h2>
    <p>Rekod fosil ular agak berkurangan kerana rangka ular biasanya kecil dan rapuh, 
oleh itu jarang mengalami pemfosilan. Fosil-fosil yang sedia ada boleh dicamkan sebagai
 ular (biarpun sering memelihara kaki belakang) mula-mula muncul dalam rekod fosil 
pada Usia Kapur. Fosil-fosil ular terawal yang diketahui datang dari tapak-tapak di Utah
dan Algeria, masing-masing diwakili oleh genus Coniophis dan Lapparentophis. Tapak-tapak 
fosil ini dipercayai bertarikh pada kala Albia atau Senomania pada akhir Zaman 
Batu Kapur, sekitar 112–94 juta tahun dahulu. Bagaimanapun, terdapat satu fosil dari 
tapak di Algeria yang dikatakan lebih lama, iaitu mungkin seawal kala Aptia, 
iaitu 125–112 juta tahun dahulu.
    </p>
    <h2>Saiz</h2>
    <p>Ular Titanoboa cerrejonensis yang kini pupus didapati mencapai panjang 12–15 meter 
(39–49 ka). Sebagai perbandingan, ular terbesar yang masih wujud ialah ular sawa yang 
menjangkau kepanjangan 9 meter (30 ka), dan anakonda yang berukuran sekitar 7.5 meter 
(25 ka) dan dianggap sebagai ular yang paling berat di Bumi.
    </p>
    <p>Sebaliknya, ular terkecil yang masih wujud ialah Leptotyphlops carlae, dengan 
panjang sekitar 10 sentimeter (4 in). Kebanyakan ular merupakan haiwan yang agak kecil, 
dengan panjang kira-kira 1 meter.
    </p>
    <h2>Bisa</h2>
    <p>Ular tedung, ular kapak, dan spesies-spesies yang sebagainya menggunakan 
bisa untuk melumpuhkan atau membunuh mangsa. Bisa itu merupakan air liur terubah 
suai yang disampaikan melalui siungnya. Siung ular berbisa yang "maju" seperti ular 
kapak dan ular tedung berongga untuk menyuntikkan bisa dengan lebih berkesan, 
sementara siung ular bersiung belakang seperti Dispholidus typus sekadar mempunyai 
alur di hujung depan untuk menyalurkan bisa ke dalam luka. Keberkesanan bisa ular 
lazimnya tertakluk pada spesies mangsa—peranannya dalam pertahanan diri sekadar sampingan.
    </p>
  </body>
</html>

Buka fail ular2.html dengan pelayar anda dan anda akan melihat laman yang berlatar belakang kekuningan serta beberapa perubahan lain.

Sebelum: Borang

Indeks

Berikut: Pengesahsahihan HTML