Membuat Website Itu Mudah (Bagian XII – Form)

Index pada bagian ini :

1. Membuat Form.
2. Membuat Text Field.

3. Membuat Password Field.

4. Menambahkan Button.

5. Membuat Check Box.

6. Membuat Selection Menu.

7. Membuat Selection List.

8. Membuat Hidden Field.

9. Membuat File Field.

Membuat Form

Form adalah bagian dari HTML yang digunakan oleh pihak pengelola untuk menghasilkan respon dari para penggunanya. Ha ini tentu menjadi sangat bermanfaat bagi pemilik website karena ia bisa mendapatkan informasi berharga dari para penggunanya. Data-data yang diharapkan untuk diisi oleh user dibuat dalam bentuk kotak teks kosong yang bisa diisi oleh pengunjung atau bisa pula berupa beberapa pilihan. Dengan satu tombol “submit” data tersebut kemudian dikirimkan oleh pengunjung ke tempat yang telah ditentukan. Pemilik website dapat menentukan ke mana aliran data tersebut akan ditampung: e-mail atau ke database. Untuk itu diperlukan halaman yang berisi script pemrograman yang dapat mengirimkan data (HTML tidak dapat melakukannya). Script ditulis dalam bahasa yang dapat berhubungan dengan server, seperti ASP, PHP, CGI, PERL, dan sebagainya. Oleh karena itu, jika Anda ingin dapat menampung data yang diberikan oleh pengunjung, maka mempelajari script pemrograman adalah satu keharusan.

PHP adalah salah satu contoh bahasa pemrograman yang cukup mudah untuk dipelajari dan memiliki beberapa kelebihan dibandingkan dengan bahasa pemrograman lainnya: dikenal luas oleh internet programmer seluruh dunia sehingga banyak server menyediakan dukungan terhadap halaman yang ditulis dengan PHP, struktur bahasanya yang mirip dengan bahasa javascript sehingga Anda dapat mempelajari syntax pemrograman yang secara umum memiliki kemiripan, dikenal sebagai bahasa pemrograman yang handal, dikenal stabil untuk berhubungan dengan database MySQL, dan open source tak perlu membayar sepeserpun.

Nah, sekarang mari kita coba untuk membuat form. Hal yang pertama harus kita ketahui adalah bahwa Form dibuka dan ditutup dengan Tag <form> dan </form>. Di dalam Tag <form> ini Anda harus menuliskan atribut action dan method sebagai cara untuk mengirimkan data yang ada di dalam form tersebut. Nilai dari atribut action adalah nama file, sedangkan nilai pada method dapat dipilih GET atau POST. Contohnya adalah sebagai berikut:

<html>
  <head>
     <title>Membuat Form</title>
  </head>
  <body>
     <form action="salam.php" method="POST">
        Isi Form
     </form>
  </body>
</html>

Membuat Text Field

Form input yang paling sering dipergunakan dalam HTML adalah Text Field. Contoh yang paling lazim adalah ketika kita diminta untuk mengetikkan nama dan password pada penyedia jasa layanan e-mail, atau mengetikkan kata tertentu pada mesin pencari. Dengan menyediakan Text Field, maka pengunjung dapat dengan bebas mengetikkan sesuatu di dalamnya.

<html>
  <head>
     <title>Membuat Form</title>
  </head>
  <body>
     <form action="salam.php" method="POST">
        Nama : <input type="text" name="nama_depan">
        email : <input type="text" name="email">
     </form>
  </body>
</html>

Dengan cara yang sama Anda dapat meminta pengunjung untuk mengisi form Nama dan Alamat e-mail yang ditampilkan pada browser sebagai berikut : membuat-form_01

Membuat Password Field

Password field adalah kotak tempat dituliskan password seperti yang biasa kita pergunakan pada layanan email. Mirip dengan text field, password field adalah menghasilkan teks tetapi tampilannya disembunyikan dan diganti dengan tanda lingkaran kecil. Membuat password field sama dengan membuat text field, yakni dengan menambahkan Tag <input>. Nilai atribut type adalah password.

Untuk mengatur jumlah karakter yang ditampilkan dan jumlah karakter yang dapat diketikkan, gunakan atribut size dan maxlength. Contohnya adalah sebagai berikut:

<html>
 <head>
  <title>Membuat Form</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td align="right">
     <form action="salam.php" method="post">

       Nama : <input type="text" name="nama_depan" size="20" maxlength="20"><br>
       Password : <input type="password" name="password" size="20" maxlength="20">

     </form>
    </td>
   </tr>
  </table>
 </body>
</html>

Pada browser akan ditampilkan sebagai berikut :
membuat-form_02

Menambahkan Button

Button atau Tombol dibutuhkan untuk mengirimkan data yang sudah diketikkan oleh pengunjung. Ada dua jenis tombol yang bisa dipergunakan, yakni tombol “submit” dan “reset”. Tombol submit adalah untuk mengirimkan data ke alamat yang disebutkan dalam atribut action pada tag <form>, sedangkan tombol “reset” dipergunakan untuk mengosongkan kembali isi form. Contohnya adalah sebagai berikut:

<html>
 <head>
  <title>Membuat Form</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td align="right">
     <form action="salam.php" method="post">
       Nama : <input type="text" name="nama_depan" size="20" maxlength="20"><br>
       Password : <input type="password" name="password" size="20" maxlength="20"><br>

       <input type="submit" name="login" value="Login">
       <input type="reset" name="reset" value="Reset">
     </form>
    </td>
   </tr>
  </table>
 </body>
</html>

Pada browser akan ditampilkan sebagai berikut :
membuat-form_03

Membuat Text Area

Text Area adalah input text yang terdiri atas beberapa baris text. Text Area dipergunakan bagi pengunjung untuk mengetikkan kalimat demi kalimat yang jumlahnya bisa sangat banyak. Contoh yang paling umum adalah kotak untuk komentar. Button atau Tombol dibutuhkan untuk mengirimkan data yang sudah diketikkan oleh pengunjung. Text Area dibuat dengan menggunakan Tag <textarea>. Atribut yang bisa ditambahkan adalah:

  • name sebagai nama variable yang menampung text yang
    diketikkan oleh pengunjung.
  • cols untuk menentukan lebar textarea.
  • rows untuk menentukan jumlah baris yang ditampilkan.
  • wrap untuk menampilkan seluruh text di dalam kotak textarea.
  • Contoh penggunaan textarea adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0">
       <form action="salam.php" method="post">
        <tr>
          <td align="right">Nama</td>
          <td>:</td>
          <td><input name="nama_depan" type="text" size="20" maxlength="20" /></td>
        </tr>
        <tr>
          <td align="right">e-mail</td>
          <td>:</td>
          <td><input name="email" type="text" size="20" maxlength="20" /></td>
        </tr>
        <tr>
          <td align="right" valign="top">Komentar</td>
          <td valign="top">:</td>
          <td><textarea name="komentar" cols="30" rows="10" wrap="virtual">
            </textarea></td>
        </tr>
        <tr>
          <td align="right">&nbsp;</td>
          <td align="right">&nbsp;</td>
          <td><input type="submit" name="submit" value="Submit" />
            <input type="reset" name="reset" value="Reset" /></td>
        </tr>
       </form>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_04

    Membuat Radio Button

    Radio Button adalah tombol input yang salah satunya dapat dipilih oleh pengunjung. Disebut Radio Button karena fungsinya mirip dengan tombol yang ada pada radio zaman dahulu, jika salah satu tombol ditekan, maka tombol yang lainnya akan mati. Radio Button dibuat dengan menuliskan Tag <input type=”radio”>. Atribut yang bisa ditambahkan adalah:

    • name sebagai nama variable yang menampung pilihan pengunjung.
    • value sebagai nilai pada variable yang disebutkan pada atribut name.
    • checked sebagai penanda bahwa tombol ini aktif.

    Contoh penggunaan Radio Button adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
       <tr>
        <td>
         <table border="0" bgcolor="#FFFFFF">
          <form action="salam.php" method="post">
            <tr>
              <td align="right">Nama</td>
              <td>:</td>
              <td><input name="nama" type="text" size="20" maxlength="20" /></td>
            </tr>
            <tr>
              <td align="right">Gender</td>
              <td>:</td>
              <td><input name="gender" type="radio" value="Pria" checked="checked" />
                Pria
                <input name="gender" type="radio" value="Wanita" />
                Wanita</td>
            </tr>
            <tr>
              <td align="right">&nbsp;</td>
              <td align="right">&nbsp;</td>
              <td><input type="submit" name="submit" value="Submit" />
                  <input type="reset" name="reset" value="Reset" /></td>
            </tr>
          </form>
         </table>
        </td>
       </tr>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_05

    Membuat Check Box

    Check Box adalah pilihan yang dapat di-klik oleh pengunjung. Pilihan ini berupa tombol yang berdiri sendiri, sifatnya berupa toggle: on jika di-klik dan off jika di-klik kembali. Check Box disediakan bagi pengunjung untuk dapat memilih apapun yang disukainya. Check Box ditulis dengan Tag <input type=”checkbox”>. Atribut yang bisa ditambahkan adalah:

    • name sebagai nama variable yang menampung pilihan pengunjung.
    • value sebagai nilai pada variable yang disebutkan pada atribut name.
    • checked sebagai penanda bahwa tombol ini aktif.

    Contoh penggunaan Check Box adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
       <tr>
        <td>
         <table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
          <form action="salam.php" method="post">
            <tr>
              <td align="right">Nama : </td>
              <td>
                <input name="nama" type="text" size="20" maxlength="20" /></td>
              <td></td>
            </tr>
            <tr bgcolor="#FFFFCC">
              <td align="right" valign="top">Minat :</td>
              <td valign="top">
                <input type="checkbox" name="minat1" value="membaca" />
                 Membaca<br />
                <input type="checkbox" name="minat2" value="travelling" />
                 Travelling<br />
                <input type="checkbox" name="minat3" value="komputer" />
                 Komputer<br />
                <input type="checkbox" name="minat4" value="melukis" />
                 Melukis<br />
                <input type="checkbox" name="minat5" value="fotografi" />
                 Fotografi <br /></td>
              <td valign="top">
                <input type="checkbox" name="minat6" value="memasak" />
                 Memasak<br />
                <input type="checkbox" name="minat7" value="olahraga" />
                 Olah Raga<br />
                <input type="checkbox" name="minat8" value="berkebun" />
                  Berkebun<br />
                <input type="checkbox" name="minat9" value="musik" />
                  Musik <br />
                <input type="checkbox" name="minat10" value="lainnya" />
                  Lainnya </td>
            </tr>
            <tr>
              <td align="right"></td>
              <td><input type="submit" name="submit" value="Submit" />
                <input type="reset" name="reset" value="Reset" /></td>
              <td></td>
            </tr>
          </form>
         </table>
        </td>
       </tr>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_06

    Membuat Selection Menu

    Selection Menu adalah pilihan yang berupa menu dropdown, yakni menu yang hanya ditampilkan satu baris, namun ketika dipilih muncul deretan ke bawah yang bisa dipilih salah satunya saja. Selecton Menu ditulis dengan Tag <select name=”nama_variabel”>. Selanjutnya menuliskan list pilihan dalam tag <option>. Atribut yang bisa ditambahkan adalah:

    • name sebagai nama variable yang menampung pilihan pengunjung.
    • value sebagai nilai pada variable yang disebutkan pada atribut name.
    • selected sebagai penanda bahwa pilihan ini aktif.

    Contoh penggunaan Selection Menu adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
       <tr>
        <td>
         <table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
          <form action="salam.php" method="post">
           <tr>
            <td align="right">Nama : </td>
            <td><input name="nama" type="text" size="20" maxlength="20" /></td>
           </tr>
           <tr bgcolor="#FFFFCC">
            <td align="right" valign="top">Pendidikan : </td>
            <td valign="top">
                 <select name="select">
                   <option selected="selected">- Pilih -</option>
                   <option value="SD">SD</option>
                   <option value="SMP">SMP</option> 
                   <option value="SMA">SMA</option>
                   <option value="D3">D3</option>
                   <option value="S1">S1</option>
                   <option value="S2">S2</option>
                   <option value="S3">S3</option>
                 </select>
            </td>
           </tr>
           <tr>
            <td align="right"></td>
            <td><input type="submit" name="submit" value="Submit" />
             <input type="reset" name="reset" value="Reset" /></td>
           </tr>
          </form>
         </table>
        </td>
       </tr>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_07

    Membuat Selection List

    Selection List adalah pilihan yang berupa dropdown list, yakni menu yang hanya ditampilkan satu baris, namun ketika dipilih muncul deretan ke bawah yang bisa dipilih. Mirip dengan Selection Menu, namun pengunjung dapat memilih beberapa menu sekaligus. Selecton List ditulis dengan Tag <select name=”nama_variabel”>. Selanjutnya menuliskan list pilihan dalam tag <option>. Atribut yang bisa ditambahkan adalah:

    • name sebagai nama variable yang menampung pilihan pengunjung.
    • size untuk menentukan berapa baris menu list akan ditampilkan.
    • multiple untuk menentukan bahwa pengunjung dapat menandai beberaa pilihan sekaligus
    • value sebagai nilai pada variable yang disebutkan pada atribut name.
    • selected sebagai penanda bahwa pilihan ini aktif.

    Contoh penggunaan Check Box adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
       <tr>
        <td><table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
           <form action="salam.php" method="post">
             <tr>
               <td align="right">Nama : </td>
               <td><input name="nama" type="text" size="20" maxlength="20" /></td>
             </tr>
             <tr bgcolor="#FFFFCC">
               <td align="right" valign="top">Pekerjaan : </td>
               <td valign="top">
                 <select name="select" size="4" multiple="multiple">
                   <option>- Pilih -</option>
                   <option value="pns">Pegawai Negeri Sipil</option>
                   <option value="abri">ABRI</option>
                   <option value="wiraswasta">Wiraswasta</option>
                   <option value="karyawan">Karyawan</option>
                   <option value="pengajar">Pengajar</option>
                   <option value="dosen">Dosen</option>
                   <option value="pensiunan">Pensiunan</option>
                   <option value="lainnya">Lainnya</option>
                 </select>
               </td>
             </tr>
             <tr>
               <td align="right">&nbsp;</td>
               <td><input type="submit" name="submit" value="Submit" />
                   <input type="reset" name="reset" value="Reset" /></td>
             </tr>
           </form>
         </table>
        </td>
       </tr>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_08

    Membuat Hidden Field

    Hidden Field adalah form rahasia yang tidak dapat dilihat oleh pengunjung, namun dikirimkan bersamaan dengan form isian. Fungsi utama hidden field adalah untuk memberi keleluasaan kepada pemilik website untuk melakukan pengecekan terhadap halaman-halaman yang dikelolanya. Hidden Field ditulis dengan Tag <input type=”hidden”>. Atribut yang bisa ditambahkan adalah:

    • name sebagai nama variable.
    • value sebagai nilai pada variable yang disebutkan pada atribut name.

    Contoh penggunaan Hidden Field adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
       <tr>
        <td>
         <table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
          <form action="salam.php" method="post">
           <tr>
            <td align="right">Nama : </td>
            <td><input name="nama" type="text" size="20" maxlength="20" /></td>
           </tr>
           <tr>
            <td>
    
              <input name="customer" type="hidden" value="http://www.kursusprivat.com" />
    
            </td>
            <td><input type="submit" name="submit" value="Submit" />
             <input type="reset" name="reset" value="Reset" /></td>
           </tr>
          </form>
         </table>
        </td>
       </tr>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_09

    Membuat File Field

    File Field adalah input text yang dapat diisi dengan nama file dan folder. File Field disediakan bagi pengunjung untuk melakukan proses upload (memindahkan file dari komputer ke internet). Pengunjung dapat memilih file yang akan diupload dengan menekan tombol yang disediakan. Setelah file siap untuk diupload, maka pengunjung dapat melakukan proses upload dengan menekan tombol submit.

    File Field ditulis dengan Tag <input type=”file”>. Atribut yang bisa ditambahkan adalah:

    • name sebagai nama variable yang menampung pilihan pengunjung.
    • size untuk menentukan jumlah teks yang dapat ditampilkan dalam File Field.
    • maxlength untuk menentukan jumlah karakter maksimal yang dapat dimuat pada File Field.

    Penggunaan File Field akan berdampak pada sistem pengiriman data. Data yang biasanya hanya berupa teks, sekarang bertambah menjadi dua jenis data yakni teks dan file. Oleh karena itu, pada Tag <form> harus ditambahkan dengan atribut enctype=”multipart/form-data”.

    Contoh penggunaan File Field adalah sebagai berikut:

    <html>
     <head>
      <title>Membuat Form</title>
     </head>
     <body>
      <table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
       <tr>
        <td>
         <table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
             <form action="salam.php" method="post" enctype="multipart/form-data">
               <tr>
                 <td align="right">Nama : </td>
                 <td><input name="nama" type="text" size="20" maxlength="20" /></td>
               </tr>
               <tr bgcolor="#FFFFCC">
                 <td align="right" valign="top">Foto : </td>
                 <td valign="top">
    
                   <input name="file" type="file" size="20" maxlength="50" />
                 </td>
               </tr>
               <tr>
                 <td align="right">&nbsp;</td>
                 <td><input type="submit" name="submit" value="Submit" />
                     <input type="reset" name="reset" value="Reset" /></td>
               </tr>
             </form>
         </table>
        </td>
       </tr>
      </table>
     </body>
    </html>

    Pada browser akan ditampilkan sebagai berikut :membuat-form_10
    Demikian penjelasan mengenai topik Membuat Form. Kita lanjutkan di topik bahasan selanjutnya.■

    Advertisements

    Membuat Website Itu Mudah (Bagian XI – Karakter Khusus)

    Karakter Khusus atau Special Character adalah huruf di luar yang biasa dipergunakan untuk menulis dan membaca. Tanda baca selain titik dan koma termasuk pada karakter khusus, selain itu huruf Yunani, kode matematika, huruf Latin yang diberi tanda tambahan juga menjadi karakter khusus yang dapat dipanggil melalui kode HTML. Berikut ini daftar karakter khusus beserta kodenya :

    ID Kode Keterangan
    Á & #193; &Aacute; latin capital letter A with acute
    á & #225; &aacute; latin small letter a with acute
    â & #226; &acirc; latin small letter a with circumflex
    Â & #194; &Acirc; latin capital letter A with circumflex
    ´ & #180; &acute; acute accent
    æ & #230; &aelig; latin small letter ae
    Æ & #198; &AElig; latin capital letter AE
    À & #192; &Agrave; latin capital letter A with grave
    à & #224; &agrave; latin small letter a with grave
    & #8501; &alefsym; alef symbol
    Α & #913; &Alpha; greek capital letter alpha
    α & #945; &alpha; greek small letter alpha
    & & #38; &amp; ampersand
    & #8743; &and; logical and
    & #8736; &ang; angle
    å & #229; &aring; latin small letter a with ring above
    Å & #197; &Aring; latin capital letter A with ring above
    & #8776; &asymp; almost equal to
    Ã & #195; &Atilde; latin capital letter A with tilde
    ã & #227; &atilde; latin small letter a with tilde
    Ä & #196; &Auml; latin capital letter A with diaeresis
    ä & #228; &auml; latin small letter a with diaeresis
    & #8222; &bdquo; double low-9 quotation mark
    Β & #914; &Beta; greek capital letter beta
    β & #946; &beta; greek small letter beta
    ¦ & #166; &brvbar; broken bar
    & #8226; &bull; bullet
    & #8745; &cap; intersection
    Ç & #199; &Ccedil; latin capital letter C with cedilla
    ç & #231; &ccedil; latin small letter c with cedilla
    ¸ & #184; &cedil; cedilla
    ¢ & #162; &cent; cent sign
    χ & #967; &chi; greek small letter chi
    Χ & #935; &Chi; greek capital letter chi
    ˆ & #710; &circ; modifier letter circumflex accent
    & #9827; &clubs; black club suit
    & #8773; &cong; approximately equal to
    © & #169; &copy; copyright sign
    & #8629; &crarr; downwards arrow with corner leftwards
    & #8746; &cup; union
    ¤ & #164; &curren; currency sign
    & #8224; &dagger; dagger
    & #8225; &Dagger; double dagger
    & #8659; &dArr; downwards double arrow
    & #8595; &darr; downwards arrow
    ° & #176; &deg; degree sign
    Δ & #916; &Delta; greek capital letter delta
    δ & #948; &delta; greek small letter delta
    & #9830; &diams; black diamond suit
    ÷ & #247; &divide; division sign
    é & #233; &eacute; latin small letter e with acute
    É & #201; &Eacute; latin capital letter E with acute
    Ê & #202; &Ecirc; latin capital letter E with circumflex
    ê & #234; &ecirc; latin small letter e with circumflex
    è & #232; &egrave; latin small letter e with grave
    È & #200; &Egrave; latin capital letter E with grave
    & #8709; &empty; empty set
    & #8195; &emsp; em space
    & #8194; &ensp; en space
    ε & #949; &epsilon; greek small letter epsilon
    Ε & #917; &Epsilon; greek capital letter epsilon
    & #8801; &equiv; identical to
    Η & #919; &Eta; greek capital letter eta
    η & #951; &eta; greek small letter eta
    ð & #240; &eth; latin small letter eth
    Ð & #208; &ETH; latin capital letter ETH
    ë & #235; &euml; latin small letter e with diaeresis
    Ë & #203; &Euml; latin capital letter E with diaeresis
    & #8364; &euro; euro sign
    & #8707; &exist; there exists
    ƒ & #402; &fnof; latin small f with hook
    & #8704; &forall; for all
    ½ & #189; &frac12; vulgar fraction one half
    ¼ & #188; &frac14; vulgar fraction one quarter
    ¾ & #190; &frac34; vulgar fraction three quarters
    & #8260; &frasl; fraction slash
    Γ & #915; &Gamma; greek capital letter gamma
    γ & #947; &gamma; greek small letter gamma
    & #8805; &ge; greater-than or equal to
    > & #62; &gt; greater-than sign
    & #8660; &hArr; left right double arrow
    & #8596; &harr; left right arrow
    & #9829; &hearts; black heart suit
    & #8230; &hellip; horizontal ellipsis
    í & #237; &iacute; latin small letter i with acute
    Í & #205; &Iacute; latin capital letter I with acute
    î & #238; &icirc; latin small letter i with circumflex
    Î & #206; &Icirc; latin capital letter I with circumflex
    ¡ & #161; &iexcl; inverted exclamation mark
    Ì & #204; &Igrave; latin capital letter I with grave
    ì & #236; &igrave; latin small letter i with grave
    & #8465; &image; blackletter capital I
    & #8734; &infin; infinity
    & #8747; &int; integral
    Ι & #921; &Iota; greek capital letter iota
    ι & #953; &iota; greek small letter iota
    ¿ & #191; &iquest; inverted question mark
    & #8712; &isin; element of
    Ï & #207; &Iuml; latin capital letter I with diaeresis
    ï & #239; &iuml; latin small letter i with diaeresis
    Κ & #922; &Kappa; greek capital letter kappa
    κ & #954; &kappa; greek small letter kappa
    λ & #955; &lambda; greek small letter lambda
    Λ & #923; &Lambda; greek capital letter lambda
    & #9001; &lang; left-pointing angle bracket
    « & #171; &laquo; left-pointing double angle quotation mark
    & #8592; &larr; leftwards arrow
    & #8656; &lArr; leftwards double arrow
    & #8968; &lceil; left ceiling
    & #8220; &ldquo; left double quotation mark
    & #8804; &le; less-than or equal to
    & #8970; &lfloor; left floor
    & #8727; &lowast; asterisk operator
    & #9674; &loz; lozenge
    & #8206; &lrm; left-to-right mark
    & #8249; &lsaquo; single left-pointing angle quotation mark
    & #8216; &lsquo; left single quotation mark
    < & #60; &lt; less-than sign
    ¯ & #175; &macr; macron
    & #8212; &mdash; em dash
    µ & #181; &micro; micro sign
    · & #183; &middot; middle dot
    & #8722; &minus; minus sign
    Μ & #924; &Mu; greek capital letter mu
    μ & #956; &mu; greek small letter mu
    & #8711; &nabla; nabla
    & #160; &nbsp; no-break space
    & #8211; &ndash; en dash
    & #8800; &ne; not equal to
    & #8715; &ni; contains as member
    ¬ & #172; &not; not sign
    & #8713; &notin; not an element of
    & #8836; &nsub; not a subset of
    ñ & #241; &ntilde; latin small letter n with tilde
    Ñ & #209; &Ntilde; latin capital letter N with tilde
    Ν & #925; &Nu; greek capital letter nu
    ν & #957; &nu; greek small letter nu
    ó & #243; &oacute; latin small letter o with acute
    Ó & #211; &Oacute; latin capital letter O with acute
    Ô & #212; &Ocirc; latin capital letter O with circumflex
    ô & #244; &ocirc; latin small letter o with circumflex
    Π& #338; &OElig; latin capital ligature OE
    œ & #339; &oelig; latin small ligature oe
    ò & #242; &ograve; latin small letter o with grave
    Ò & #210; &Ograve; latin capital letter O with grave
    & #8254; &oline; overline
    ω & #969; &omega; greek small letter omega
    Ω & #937; &Omega; greek capital letter omega
    Ο & #927; &Omicron; greek capital letter omicron
    ο & #959; &omicron; greek small letter omicron
    & #8853; &oplus; circled plus
    & #8744; &or; logical or
    ª & #170; &ordf; feminine ordinal indicator
    º & #186; &ordm; masculine ordinal indicator
    Ø & #216; &Oslash; latin capital letter O with stroke
    ø & #248; &oslash; latin small letter o with stroke
    Õ & #213; &Otilde; latin capital letter O with tilde
    õ & #245; &otilde; latin small letter o with tilde
    & #8855; &otimes; circled times
    Ö & #214; &Ouml; latin capital letter O with diaeresis
    ö & #246; &ouml; latin small letter o with diaeresis
    & #182; &para; pilcrow sign
    & #8706; &part; partial differential
    & #8240; &permil; per mille sign
    & #8869; &perp; up tack
    φ & #966; &phi; greek small letter phi
    Φ & #934; &Phi; greek capital letter phi
    Π & #928; &Pi; greek capital letter pi
    π & #960; &pi; greek small letter pi
    ϖ & #982; &piv; greek pi symbol
    ± & #177; &plusmn; plus-minus sign
    £ & #163; &pound; pound sign
    & #8243; &Prime; double prime
    & #8242; &prime; prime
    & #8719; &prod; n-ary product
    & #8733; &prop; proportional to
    ψ & #968; &psi; greek small letter psi
    Ψ & #936; &Psi; greek capital letter psi
    & #34; &quot; quotation mark
    & #8730; &radic; square root
    & #9002; &rang; right-pointing angle bracket
    » & #187; &raquo; right-pointing double angle quotation mark
    & #8658; &rArr; rightwards double arrow
    & #8594; &rarr; rightwards arrow
    & #8969; &rceil; right ceiling
    & #8221; &rdquo; right double quotation mark
    & #8476; &real; blackletter capital R
    ® & #174; &reg; registered sign
    & #8971; &rfloor; right floor
    Ρ & #929; &Rho; greek capital letter rho
    ρ & #961; &rho; greek small letter rho
    & #8207; &rlm; right-to-left mark
    & #8250; &rsaquo; single right-pointing angle quotation mark
    & #8217; &rsquo; right single quotation mark
    & #8218; &sbquo; single low-9 quotation mark
    Š & #352; &Scaron; latin capital letter S with caron
    š & #353; &scaron; latin small letter s with caron
    & #8901; &sdot; dot operator
    § & #167; &sect; section sign
    ­ & #173; &shy; soft hyphen
    Σ & #931; &Sigma; greek capital letter sigma
    σ & #963; &sigma; greek small letter sigma
    ς & #962; &sigmaf; greek small letter final sigma
    & #8764; &sim; tilde operator
    & #9824; &spades; black spade suit
    & #8834; &sub; subset of
    & #8838; &sube; subset of or equal to
    & #8721; &sum; n-ary sumation
    & #8835; &sup; superset of
    ¹ & #185; &sup1; superscript one
    ² & #178; &sup2; superscript two
    ³ & #179; &sup3; superscript three
    & #8839; &supe; superset of or equal to
    ß & #223; &szlig; latin small letter sharp s
    Τ & #932; &Tau; greek capital letter tau
    τ & #964; &tau; greek small letter tau
    & #8756; &there4; therefore
    Θ & #920; &Theta; greek capital letter theta
    θ & #952; &theta; greek small letter theta
    ϑ & #977; &thetasym; greek small letter theta symbol
    & #8201; &thinsp; thin space
    Þ & #222; &THORN; latin capital letter THORN
    þ & #254; &thorn; latin small letter thorn with
    ˜ & #732; &tilde; small tilde
    × & #215; &times; multiplication sign
    & #8482; &trade; trade mark sign
    ú & #250; &uacute; latin small letter u with acute
    Ú & #218; &Uacute; latin capital letter U with acute
    & #8657; &uArr; upwards double arrow
    & #8593; &uarr; upwards arrow
    û & #251; &ucirc; latin small letter u with circumflex
    Û & #219; &Ucirc; latin capital letter U with circumflex
    Ù & #217; &Ugrave; latin capital letter U with grave
    ù & #249; &ugrave; latin small letter u with grave
    ¨ & #168; &uml; diaeresis
    ϒ & #978; &upsih; greek upsilon with hook symbol
    υ & #965; &upsilon; greek small letter upsilon
    Υ & #933; &Upsilon; greek capital letter upsilon
    ü & #252; &uuml; latin small letter u with diaeresis
    Ü & #220; &Uuml; latin capital letter U with diaeresis
    & #8472; &weierp; script capital P
    ξ & #958; &xi; greek small letter xi
    Ξ & #926; &Xi; greek capital letter xi
    ý & #253; &yacute; latin small letter y with acute
    Ý & #221; &Yacute; latin capital letter Y with acute
    ¥ & #165; &yen; yen sign
    ÿ & #255; &yuml; latin small letter y with diaeresis
    Ÿ & #376; &Yuml; latin capital letter Y with diaeresis
    Ζ & #918; &Zeta; greek capital letter zeta
    ζ & #950; &zeta; greek small letter zeta
    & #8205; &zwj; zero width joiner
    & #8204; &zwnj; zero width non-joiner
    & #9632;

    Kita lanjutkan di topik bahasan selanjutnya.■

    Membuat Website Itu Mudah (Bagian X – Frameset)

    Frameset adalah salah satu cara untuk membagi-bagi halaman ke dalam beberapa bagian. Pekerjaan merancang halaman dengan memanfaatkan frameset menjadi pekerjaan yang mudah. Bagian-bagian utama pada website dapat dikelompokkan ke dalam frame, sedangkan bagian contentnya tetap berada di frame yang akan selalu berubah. Dengan demikian, kita dapat menentukan bagian mana yang akan menjadi kepala halaman (header), menu, kaki, content, dan bagian lain yang dianggap perlu.

    Frameset berbeda dengan halaman HTML biasa, di dalam halaman frameset hanya terdapat pengaturan mengenai bagaimana sebuah halaman ditata (layout halaman). Pada halaman frameset ini, dapat ditampilkan beberapa halaman HTML sekaligus pada jendela web browser yang sama. Halaman-halaman HTML yang ditampilkan dalam frameset tersebut menempati bagiannya masing-masing, dan setiap frame dalam frameset tidak saling berkaitan satu dengan lainnya. Pada halaman yang panjang, scrolling hanya berlaku pada frame itu saja – biasanya scrolling hanya diberlakukan pada frame content saja.

    Dengan adanya frameset, pengelolaan halaman menjadi mudah, namun jumlah file yang harus dikelola menjadi bertambah. Hal ini menjadi menyulitkan bagi yang belum terbiasa, mengingat perancang harus bekerja dengan beberapa dokumen HTML sekaligus.

    Pembuatan halaman frameset menggunakan dua tag HTML, yaitu Tag <frameset> dan Tag <frame>, penjelasannya adalah sebagai berikut:

    Tag Frameset

    Tag <frameset> digunakan untuk mendefinisikan bagaimana jendela web browser akan dibagi menjadi frame-frame yang lebih kecil. Tag <frameset> ini dituliskan untuk membagi-bagi halaman ke dalam format baris dan kolom yang akan diisi dengan frame. Nilai baris atau kolom menentukan jumlah area layar yang akan digunakan oleh setiap baris atau kolom. Pada frame-frame tersebut ditempatkan halaman-halaman HTML. Satu halaman HTML akan menempati satu frame.

    Tag <frameset cols> berikut akan membagi layar menjadi tiga bagian kolom masing-masing lebarnya sebesar 25%, 50%, dan 25% dari lebar keseluruhan area layar.

    <frameset cols=”25%,50%,25%”>

    Layout halaman frameset di atas akan tampak seperti di bawah ini:

    frame 1 – 25% frame 2 – 50% frame 3 – 25%

    Tag <frameset rows> berikut akan membagi layar menjadi tiga bagian baris masing-masing tingginya sebesar 25%, 50%, dan 25% dari tinggi keseluruhan area layar.

    <frameset rows=”25%,50%,25%”>

    Layout halaman frameset di atas akan tampak seperti di bawah ini :

    frame 1 – 25%
    frame 2 – 50%
    frame 3 – 25%

    Pembagian frame bisa dengan ukuran persentase (relatif) seperti contoh di atas, atau dengan ukuran pixel (absolut). Namun dengan pixel tidak dapat ditentukan ukuran seluruh frame, karena ukuran layar monitor yang digunakan juga belum tentu sama. Untuk itu digunakan tanda “*” untuk pengganti ukuran yang tidak tentu tadi. Contoh berikut akan membagi layar menjadi dua bagian baris masing-masing sebesar 100 pixel dan sisa pixel dari tinggi area layar.

    <frameset rows=”100,*”>

    Layout halaman frameset di atas akan tampak seperti di bawah ini :

    frame 1 – 100 px
    frame 2 – fleksibel

    Sedangkan contoh ini akan membagi layar menjadi dua bagian kolom masing-masing sebesar 100 pixel dan sisa pixel dari lebar area layar.

    <frameset cols=”100,*”>

    Layout halaman frameset di atas akan tampak seperti di bawah ini :

    frame 1
    100 px
    frame 2
    fleksibel

    Tag <frameset> tidak membutuhkan adanya tag <body> kecuali bila web browser yang digunakan tidak mendukung tag <frameset> tersebut.

    Tag Frame

    Tag <frame> dituliskan untuk menempatkan dokumen HTML yang akan disertakan pada frame.

    Pada contoh berikut, frameset membagi halaman menjadi dua kolom, masing-masing lebar kolom adalah 25% dan 75% dari lebar area layar. Dokumen HTML dengan nama “frame_1.html” ditempatkan pada kolom pertama, dan dokumen HTML kedua bernama “frame_2.html” disertakan pada kolom kedua.

    <frameset cols=”25%,75%”>
    <frame src=”frame_1.html”>
    <frame src=”frame_2.html”>
    </frameset>

    Frameset Vertikal

    Nah, sekarang kita coba membuat sebuah halaman website dengan frameset. Jalankan aplikasi Notepad. Klik Start > Programs > Accessories > Notepad. Kemudian ketik baris perintah berikut ini :

    <html>
    <frameset cols=”20%,60%,20%”><frame src=”frame_1.html”>
    <frame src=”frame_2.html”>
    <frame src=”frame_3.html”></frameset>
    </html>

    Simpan file di My Documents sebagai “frameset-01.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Documents, kemudian pada bagian Save as type pilih All Files, lalu ketik “frameset-01.html” pada bagian File name, klik tombol Save.

    Jalankan aplikasi Explorer, klik My Documents, cari file “frameset-01.html” yang baru dibuat tadi, kemudian klik ganda file tersebut.

    Jendela Internet Browser akan terbuka, memperlihatkan isi halaman frameset-01.html.

    <– 20% –>

     

    <———– 60% ———–>

    <– 20% –>

    Penjelasan

    Contoh latihan di atas memperlihatkan bagaimana cara membuat frame dengan tiga kolom vertikal masing-masing selebar 20%, 60%, dan 20% dari lebar area layar. Frame pertama berisi “frame_1.html”, frame kedua berisi “frame_2.html”, dan frame ketiga berisi “frame_3.html”.Frameset dengan menggunakan nilai persen tidak memiliki ukuran piksel yang pasti, lebar frameset ini akan mengikuti lebar layar dan dihitung sebagai persentase dari lebar layar.

    Frameset Horizontal

    Sekarang kita coba lagi membuat sebuah halaman website dengan frameset horizontal. Jalankan aplikasi Notepad. Klik Start > Programs > Accessories > Notepad.

    Kemudian ketik baris perintah berikut ini :

    <html>
    <frameset rows=”200, *, 100″><frame src=”frame_1.html”>
    <frame src=”frame_2.html”>
    <frame src=”frame_3.html”></frameset>
    </html>

    Simpan file di My Documents sebagai “frameset-02.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Documents, kemudian pada bagian Save as type pilih All Files, lalu ketik “frameset-02.html” pada bagian File name, klik tombol Save.

    Jalankan aplikasi Explorer, klik My Documents, cari file “frameset-02.html” yang baru dibuat tadi, kemudian klik ganda file tersebut.

    Jendela Internet Browser akan terbuka, memperlihatkan isi halaman frameset-02.html.

    |
    200 pixel
    |

    |
    |
    |
    |
    * pixel (sisa dari tinggi layar)
    |
    |
    |
    |

    100 pixel

    Penjelasan

    Contoh latihan di atas memperlihatkan bagaimana cara membuat frameset dengan tiga baris horizontal masing-masing tingginya sebesar 200 pixel, * pixel (sisa tinggi dari tinggi layar), dan 100 pixel. Frame pertama berisi “frame_1.html”, frame kedua berisi “frame_2.html”, dan frame ketiga berisi “frame_3.html”.

    Perhatikan bahwa frameset ini menggunakan frame yang tetap (frame 1 = 200pixel, frame 3 = 100 pixel) dan frame yang fleksibel ditandai dengan tanda asterik (*). Frame yang tetap akan memiliki ukuran yang pasti dalam hitungan piksel, tapi frame yang fleksibel memiliki ukuran sebagai sisa dari ukuran layar dikurangi oleh ukuran frame-frame tetap.

    Tag Noframes

    Selain Tag Frameset dan Tag Frame, di dalam halaman frameset juga harus ada Tag Noframes. Format penulisannya adalah sebagai berikut:

    Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

    Ketik baris perintah berikut ini :

    <html><frameset cols=”20%,60%,20%”>

    <frame src=”frame_1.html”>

    <frame src=”frame_2.html”>

    <frame src=”frame_3.html”>

    <noframes>

    <body>Web browser tidak mendukung frame!</body>

    </noframes>

    </frameset>

    </html>

    Simpan file sebagai “frameset-03.html”

    Jalankan aplikasi Explorer, cari file “frameset-03.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

    Penjelasan

    Contoh latihan di atas memperlihatkan bagaimana tag <noframes> dibuat. Tag noframes ini akan bekerja dan menampilkan isi tag <body> jika internet browser yang digunakan tidak mendukung frameset.

    Frameset Kombinasi

    Layout halaman HTML dapat dibuat sederhana dengan membaginya menjadi beberapa baris (rows). Kemudian, pada salah satu rows, kita dapat membaginya menjadi beberapa kolom. Hal ini sering dilakukan untuk mendapatkan layout halaman HTML yang optimal.

    Sekarang kita coba untuk membuat layout halaman kombinasi tersebut. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

    Ketik baris perintah berikut ini :

    <html>
      <frameset rows="150,*">
    
        <frame src="frame_1.html">
        <frameset cols="20%,80%">
    
          <frame src="frame_2.html">
          <frame src="frame_3.html">
    
        </frameset>
    
      </frameset>
    </html>

    Simpan file sebagai “frameset-04.html”

    Jalankan aplikasi Explorer, cari file “frameset-04.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

    |

    150pixel

    |

    <– 20% –>

    < ——————- 80% ——————–>

    Penjelasan

    Contoh latihan di atas memperlihatkan cara membuat frameset kombinasi. Tag <frameset> yang pertama akan membagi layar menjadi dua frame horizontal, frame pertama di bagian atas tingginya 150 pixel dan frame kedua di bagian bawah tingginya adalah sisa pixel dari tinggi area layar. Kemudian tag <frameset> kedua akan membagi frame kedua (frame yang berada di bawah) menjadi dua frame vertikal, masing-masing sebesar 20% dan 80% dari lebar area layar.

    Frameset dengan Scrolling dan Noresize

    Layout halaman HTML ditampilkan oleh Browser sesuai dengan ukuran yang dituliskan. Jika isi frameset tersebut, yang disimpan dalam file HTML lebih besar ukurannya daripada ukuran frame yang disediakan, maka secara otomatis browser akan menampilkan scroll bar.

    Sekarang kita coba untuk membuat layout halaman dengan scrolling dan tanpa scrolling. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

    Ketik baris perintah berikut ini :

    <html><frameset rows=”150,*”>

    <frame scrolling=”No” src=”frame_1.html”>

    <frameset cols=”25%,75%”>

    <frame scroling=”No” noresize=”noresize” src=”frame_2.html”>

    <frame noresize=”noresize” src=”frame_3.html”>

    </frameset>

    </frameset>

    </html>

    Simpan file sebagai “frameset-05.html”

    Jalankan aplikasi Explorer, cari file “frameset-05.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

    Penjelasan

    Contoh latihan di atas mendemonstrasikan bagaimana atribut NORESIZE menyebabkan batas pinggiran antar frame tidak dapat digeser.

    Frame Navigasi

    Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.

    Ketik baris perintah berikut ini :

    <html><body>

    <a href=”frame_1.html” target=”showframe”>Frame 1</a><br>

    <a href=”frame_2.html” target=”showframe”>Frame 2</a><br>

    <a href=”frame_3.html” target=”showframe”>Frame 3</a>

    </body>

    </html>

    Simpan file sebagai “frame-6a.html”

    Ketik baris perintah berikut ini :

    <html><frameset cols=”120,*”>

    <frame src=”frame-6a.html”>

    <frame src=”frame_1.html” name=”showframe”>

    </frameset>

    </html>

    Simpan file sebagai “frameset-06.html”

    Jalankan aplikasi Explorer, cari file “frameset-06.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.

    Frame 1Frame 2

    Frame 3

    <showframe>

    Penjelasan

    Contoh latihan di atas memperlihatkan penggunaan frame untuk memudahkan navigasi sebuah halaman Web. Untuk itu diperlukan sebuah dokumen HTML berisi link yang berfungsi sebagai navigasi pada satu frame, dan frame lainnya akan digunakan sebagai target dokumen yang ditunjukkan pada link-link tersebut.

    Pada contoh di atas, file frame-6a.html berisi tiga buah link yang bila diklik akan dibuka pada frame bernama “showframe”, hal ini dapat dilihat dari penggunaan atribut TARGET=SHOWFRAME. Sedangkan file frameset-06.html berisi <frameset> yang membagi layar menjadi dua bagian, dan salah satu framenya diberi atribut NAME=SHOWFRAME. Pada frame inilah link-link dokumen yang ada pada file frame-6a.html akan terbuka.

    Catatan:

    Pada contoh di atas, Anda diminta untuk menyiapkan halaman-halaman HTML sebagai frameset. Untuk itu, Anda dapat menyiapkan file-file: frameset-01.html, frameset-02.html, frameset-03.html, frameset-04.html, frameset-05.html, frameset-06.html seperti yang diminta.

    Sebagaimana telah diuraikan di atas, frameset dipergunakan untuk layout halaman saja. File yang mengisi masing-masing bagian pada frameset diletakkan pada file yang terpisah. Dalam hal ini ada beberapa file lain yang perlu disiapkan, yaitu : frame_1.html, frame_2.html, frame_3.html.

    Sebagai contoh, Anda dapat menyiapkan frame_1.html dalam bentuk yang sederhana, misalnya sebagai berikut :

    <html>
     <head>
      <title>Frame 1 - Header</title>
     </head>
     <body bgcolor="#3399FF">
      <div align="center">FRAME 1 - HEADER</div>
     </body>
    </html>

    Siapkan juga file frame_2.html, misalnya sebagai berikut :

    <html>
     <head>
      <title>Frame 2</title>
     </head>
     <body bgcolor="#009966">
      <div align="center">FRAME 2</div>
     </body>
    </html>

    Dan file frame_3.html, misalnya sebagai berikut :

    <html>
     <head>
      <title>Frame 3</title>
     </head>
     <body bgcolor="#FFFFCC">
      <div align="center">FRAME 3</div>
     </body>
    </html>

    Simpan ketiga file tambahan ini pada folder yang sama dengan file-file frameset (frameset-01.html, frameset-02.html, frameset-03.html, frameset-04.html, frameset-05.html, frameset-06.html). Tentu saja dengan format .html seperti biasa.

    Dengan demikian, maka file frameset akan menyertakan file frame_1.html, frame_2.html, frame_3.html ke dalam frame yang dibentuknya.

    Kita lanjutkan di topik bahasan selanjutnya.■

    Membuat Website Itu Mudah (Bagian IX – Table untuk Layout)

    Table atau dalam Bahasa Indonesia disebut Tabel, merupakan cara untuk membagi suatu area ke dalam kolom dan baris. Sama halnya ketika kita bekerja dengan spreadsheet yang terdiri atas kotak-kotak cell, demikian pula dengan tabel terdiri atas kotak-kotak kecil yang dapat diberi tulisan, diberi warna, diberi border, dsb. Namun, dalam perkembangannya, table ternyata tidak hanya berfungsi untuk membuat kolom dan baris, melainkan lebih dari itu, dipergunakan untuk membentuk halaman website itu sendiri. Dengan kata lain, Table adalah salah satu cara yang dapat memudahkan kita dalam menata website ke dalam bagian-bagian yang lebih kecil. Dengan adanya table, maka pekerjaan menata halaman website menjadi sebuah pekerjaan yang mudah, bahkan menjadi menyenangkan.

    Kenyataannya, kebanyakan website sekarang ini ditata dengan menggunakan pembagian area yang dikelompokkan dengan rapi. Misalnya sebagai berikut:

  • Bagian atas diperuntukkan bagi Header atau Kepala halaman website dan menu utama.
  • Bagian kiri diperuntukkan bagi Menu, Submenu, atau bagian-bagian lain yang cukup penting.
  • Bagian tengah diperuntukkan bagi content website, yang berisi berbagai artikel.
  • Bagian kanan diperuntukkan bagi hal-hal lain, seperti iklan, link, dll.
  • Bagian bawah diperuntukkan bagi menu dan copyright.
    Header & Menu
    Submenu
    Content
    Iklan
    Copyright & Menu

    Pembagian area website seperti di atas sangatlah wajar dilakukan pada saat sekarang mengingat kecenderungan pemakaian monitor dan VGA Card yang berkualitas cukup baik, menghasilkan resolusi yang tajam dan dapat menampilkan ukuran panjang x lebar yang cukup besar (minimal 800 x 600 piksel) yang dapat dimanfaatkan untuk menampung semua hal tersebut di atas.

    Nah, mengingat pentingnya table dalam hal pengaturan tata letak halaman website, maka kita dapat mempelajari bagaimana table bekerja dan bagaimana bekerja dengan menggunakan table.

    Membuat Struktur Table

    Table terbagi atas tiga bagian utama, yaitu Tag table atau <table>, Tag Table Row atau <tr>, dan Tag Table Data atau <td>. Ketiganya disusun dalam hierarki. Tag Table pada hierarki tertinggi, Table Row berada di bawahnya, dan Table Data pada hierarki di bawah Table Row, sehingga kita dapat menuliskan susunan table tersebut sebagai berikut :

    <table>
      <tr>
        <td>ini isi table</td>
      </tr>
    </table>

    Hasilnya akan terlihat sebagai berikut:

    ini isi table

    Belum terlihat seperti tabel karena belum diisi dengan atribut sebagaimana lazimnya sebuah table.

    Sekarang, kita tambahkan atribut border di dalamnya:

    <table border="1">
      <tr>
        <td>ini isi table</td>
      </tr>
    </table>
    ini isi table

    Table di atas sekarang diberi pembatas atau border sebesar 1 piksel.

    Untuk menambahkan baris, maka kita harus menambahkan Tag <tr> sampai </tr>, sebagai berikut :

    <table border="1">
      <tr>
        <td>ini baris pertama</td>
      </tr>
      <tr>
        <td>ini baris kedua</td>
      </tr>
      <tr>
        <td>ini baris ketiga</td>
      </tr>
    </table>
    ini baris pertama
    ini baris kedua
    ini baris ketiga

    Sedangkan untuk menambahkan kolom, maka kita harus menambahkan Tag <td> sampai </td>, sebagai berikut :

    <table border="1">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Menambahkan Heading dan Warna pada Table

    Selain Tag <table>, <tr>, dan <td>, kita dapat menambahkan tag Heading atau <th> pada table. Tag ini dipergunakan sebagai kepala pada kolom ataupun baris.

    Agar table bisa lebih menarik untuk dilihat, kita dapat menambahkan warna background pada Tag <table>, <tr>, <td>, maupun <th>. Contohnya adalah sebagai berikut :

    <table border="1">
        <tr>
          <th bgcolor="royalblue">Heading 1 </th>
          <th bgcolor="royalblue">Heading 2 </th>
        </tr>
        <tr bgcolor="lightgrey">
          <td>baris 1 kolom 1</td>
          <td>baris 1 kolom 2</td>
        </tr>
        <tr>
          <td>baris 2 kolom 1</td>
          <td>baris 2 kolom 2</td>
        </tr>
        <tr bgcolor="lightgrey">
          <td>baris 3 kolom 1</td>
          <td>baris 3 kolom 2</td>
        </tr>
      </table>

    Heading 1 Heading 2
    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Cellpadding dan Cellspacing

    Cellpadding dan Cellspacing adalah atribut pada Tag <table> yang fungsinya untuk memberi jarak pada isi table. Atribut cellspacing dipergunakan untuk memberikan jarak antar baris dan kolom :

    <table border="1" cellpadding="0" cellspacing="10">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Sedangkan atribut cellpadding dipergunakan untuk memberi jarak antara border dengan isi sel :

    <table border="1" cellpadding="0" cellspacing="10">
      <tr>
        <td>baris 1 kolom 1</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 kolom 1 baris 1 kolom 2
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Menyatukan Kolom dan Baris pada Table

    Menyatukan beberapa kolom atau baris sekaligus, lazim dilakukan untuk membentuk layout Table sesuai dengan yang diinginkan. Proses menyatukan kolom dan baris pada spreadsheet dinamakan dengan merge columns dan merge rows. Untuk mengabungkan dua kolom, digunakan atribut colspan. Beberapa Tag <td> digabungkan pada satu <td>, sebagai berikut :

    <table border="1" cellpadding="10" cellspacing="0">
      <tr>
        <td colspan="2" bgcolor="lightgrey">baris 1 menempati 2 kolom</td>
      </tr>
      <tr>
        <td>baris 2 kolom 1</td>
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
        <td>baris 3 kolom 1</td>
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    baris 1 menempati 2 kolom
    baris 2 kolom 1 baris 2 kolom 2
    baris 3 kolom 1 baris 3 kolom 2

    Sedangkan untuk menggabungkan baris kita dapat menambahkan tag rowspan pada Tag <td> dan menghapus beberapa <td> di bawahnya :

    <table border="1" cellpadding="10" cellspacing="0">
      <tr>
        <td rowspan="3" bgcolor="lightgrey">kolom 1 menempati 3 baris</td>
        <td>baris 1 kolom 2</td>
      </tr>
      <tr>
    
        <td>baris 2 kolom 2</td>
      </tr>
      <tr>
    
        <td>baris 3 kolom 2</td>
      </tr>
    </table>

    kolom 1 menempati 3 baris baris 1 kolom 2
    baris 2 kolom 2
    baris 3 kolom 2

    Kita lanjutkan di topik bahasan selanjutnya.■

  • Membuat Website Itu Mudah (Bagian VIII – Link)

    Link adalah bagian paling penting dari halaman HTML. Link menghubungkan satu halaman HTML dengan halaman lainnya. Dengan adanya link, maka dalam satu alamat website dapat dituliskan sekian banyak halaman yang masing-masing dihubungkan dengan link. Dengan link ini pulalah sebuah website dapat diatur menjadi lebih ringkas dan tertata dengan baik.

    Alamat Absolut

    Tag untuk menghubungkan satu halaman ke halaman lain adalah <a> atau anchor, dan ditutup dengan </a>. Dengan tag anchor inilah seorang programmer web dapat menjadikan halaman-halaman HTML yang bersifat interaktif, di mana pengunjungnya dapat membuka halaman-halaman lain pada websitenya, atau membuka alamat lain yang disediakan oleh si programmer.

    Pada tag anchor tersebut, alamat yang dituju ditulis dalam properti href=””, dan bagian yang di-markup atau ditandai ditempatkan di antara tag <a> dan </a>.  Jadi, jika ingin menghubungkan ke alamat: http://www.kursusprivat.com, lengkapnya ditulis seperti ini:

    <a href=”http://www.kursusprivat.com”>Kursus Privat Komputer</a>

    pada Internet Browser akan ditampilkan seperti ini:

    Kursus Privat Komputer

    Tulisan tersebut aktif sebagai hyperlink yang akan mengantarkan orang yang mengklik ke alamat yang disebutkan pada Tag <a> tersebut.

    Mudah, bukan. Dengan demikian, anchor dipergunakan untuk menandai sebuah alamat. Namun, alamat tersebut bisa berbeda-beda, tergantung pada situasinya. Pada contoh di atas, digunakan alamat absolut dengan menyebutkan keseluruhan alamat secara lengkap.

    Alamat Relatif

    Pada pembuatan website, alamat-alamat yang disediakan biasanya berada pada satu folder yang sama dengan halaman HTML yang kita buat. Contohnya, file HTML yang kita buat adalah : index.html. Sedangkan file-file HTML lainnya adalah : profil.html, galeri.html, kontak.html. Maka, pada file : index.html dituliskan sebagai berikut :

    <a href=”profil.html”>PROFILE</a>

    <a href=”galeri.html”>GALLERY</a>

    <a href=”kontak.html”>CONTACT US</a>

    Sekarang kita coba untuk menyusunnya pada sebuah halaman HTML :

    <html>
      <head>
        <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
    	<style>
    	body { color:white; font-family:Arial }
    	a { color:white; font-family:Verdana; text-decoration:none }
    	</style>
      </head>
      <body background="bgr.gif">
        <center><img src="header.jpg" border="2" ></center>
        <center>
        <a href="index.html">HOME</a> |
        <a href="profil.html">PROFILE</a> |
        <a href="galeri.html">GALLERY</a> |
        <a href="kontak.html">CONTACT US</a>
        </center>
      </body>
    </html>

    Hasilnya akan terlihat sebagai berikut:

    Link Pada Halaman Yang Sama

    Selain dipergunakan untuk menghubungkan satu halaman ke halaman lain, link juga dapat berfungsi untuk menuju pada bagian lain dalam satu halaman yang telah diberi nama. Untuk itu, digunakan atribut name=”nama_bagian” untuk menandai satu bagian di dalam satu halaman HTML.

    Link yang sudah diberi nama tersebut, dapat diakses dari text atau gambar yang diberi tag anchor. Alamat yang disebutkan pada atribut href adalah alamat nama_bagian tersebut yang diberi tanda pagar, contoh :

    <a href=”index.html#bagian_satu”>Bagian satu</a>

    Link tersebut akan membuat text yang diapit oleh tag anchor menjadi sebuah hyperlink. Jika hyperlink tersebut diklik, maka halaman yang dibuka adalah halaman “index.html”, dan kemudian browser akan menempatkan nama anchor “bagian_satu” ke bagian paling atas pada tampilan browser.

    Dengan demikian, sebuah halaman HTML bisa saja mengandung beberapa anchor sekaligus. Hal ini dipergunakan untuk memudahkan user untuk berpindah-pindah dari satu bagian ke bagian lain, terutama apabila halaman tersebut dirasakan terlalu panjang.

    Dengan menambahkan beberapa anchor dalam satu halaman, maka struktur halaman juga dapat dibuat lebih rapi. Masing-masing bagian dapat diberi nama dan pada bagian lain programmer dapat menyediakan hyperlink ke bagian-bagian tersebut.

    Kita lanjutkan di topik bahasan selanjutnya. ■

    Membuat Website Itu Mudah (Bagian VII – Gambar & Teks Berjalan)

    Gambar biasanya menjadi bagian yang paling menarik pada sebuah website. Gambar menjadi daya tarik utama seorang pengunjung untuk tetap betah berlama-lama terpaku pada sebuah website. Selain itu, gambar juga menjadi identitas tersendiri bagi seorang perancang website, yang membedakan website yang dibuatnya dari website-website lainnya. Betapapun sederhananya sebuah website yang dirancang tetap akan memiliki ciri khas yang tidak dimiliki oleh website lain.

    Gambar pada sebuah halaman website secara sederhana dapat dihasilkan oleh berbagai perangkat elektronik yang dapat mengubah foto atau gambar menjadi data digital dalam bentuk image. Scanner dan Digital Camera adalah perangkat yang biasa digunakan untuk memproduksi gambar dalam bentuk digital. Sedangkan jenis file yang umum dipergunakan pada halaman html adalah: jpg, gif, png. File-file jenis ini sangat mudah ditemukan dan bertebaran di internet. Namun, untuk memuatnya pada halaman html yang kita buat harus memperhatikan aspek legal agar tidak terjadi hal-hal yang bertentangan dengan hukum nantinya.

    Tag yang dipergunakan untuk menampilkan gambar adalah <img src=”namafile.jenisfile”>. Misalnya untuk menampilkan gambar dengan namafile: “header.jpg”, yang berupa gambar berikut:

    maka pada file html akan ditulis seperti ini:

    <html>
      <head>
        <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
      </head>
      <body>
        <img src="header.jpg">
      </body>
    </html>

    Tempatkan file gambar: “header.jpg” satu folder dengan file html yang kita buat.

    Hasilnya akan terlihat sebagai berikut:

    File: “header.jpg” di atas memiliki ukuran: 780 x 120 piksel. Dibuat dengan acuan lebar monitor komputer yang berukuran VGA: 800 x 600 piksel. Hasilnya ditampilkan pada monitor dengan ukuran yang lebih lebar dari ukuran VGA. Tampak bahwa gambar tidak berada di posisi tengah. Untuk memperbaikinya kita dapat membuat Tag <center> dengan penutup </center> untuk membuat Tag <img> menjadi rata tengah.

    Tambahkan warna background pada Tag <body> dengan warna yang sesuai dengan karakter yang ingin ditampilkan, misalnya warna abu-abu tua untuk memberi kesan gagah. Anda dapat menambahkan atribut border pada Tag <img> untuk memberi garis pembatas pada gambar.

    <html>
      <head>
        <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
      </head>
      <body bgcolor="#333333">
        <center><img src="header.jpg" border="2"></center>
      </body>
    </html>

    Hasilnya akan terlihat sebagai berikut:

    Menampilkan Gambar Sebagai Background

    Gambar selain ditampilkan secara tersendiri, juga dapat dijadikan sebagai background. Halaman website dapat diisi dengan gambar dengan ukuran relatif kecil yang ditampilkan secara berulang-ulang sehingga memenuhi seluruh halaman.

    Contohnya adalah gambar “bgr.gif” dengan ukuran 1 x 8 piksel, seperti ini:

    dapat dijadikan sebagai background dengan cara menuliskan pada properti <body> sebagai berikut:

    <html>
      <head>
        <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
      </head>
      <body background="bgr.gif">
        <center><img src="header.jpg" border="2"></center>
      </body>
    </html>

    Tempatkan file gambar: “bgr.gif” satu folder dengan file html yang kita buat.

    Hasilnya akan terlihat sebagai berikut:

    Nah, mudah bukan? Tentu saja untuk bisa menyiapkan gambar-gambar yang baik, kita harus mempelajari software yang sesuai. Adobe Photoshop adalah salah satu software pengolah gambar / foto yang sangat berguna untuk pekerjaan ini.

    Perlu diketahui, file gambar pada sebuah halaman html bisa ditempatkan pada folder yang sama dengan file html – seperti pada 2 contoh di atas. Atau, ditempatkan pada folder khusus yang diberi nama “images”. Gunanya adalah untuk memisahkan file-file gambar dari file-file html agar terorganisasi dengan baik dan tidak bertebaran bercampur dengan file-file html. Pada sebuah website yang sudah lengkap, file-file gambar jumlahnya bisa puluhan, ratusan, bahkan ribuan, sehingga akan lebih rapi jika ditempatkan pada folder khusus dengan nama : images.

    Menambahkan Teks Berjalan

     
    Selanjutnya kita bisa menambahkan tulisan berjalan di bawah gambar header tersebut dengan menggunakan Tag <marquee> dan ditutup dengan </marquee>. Tentu saja kita dapat menambahkan style pada tulisan agar ditampilkan dengan warna dan font yang sesuai dengan selera.

    <html>
      <head>
        <title>HEMAT BBM SELAMATKAN LINGKUNGAN</title>
      </head>
      <body background="bgr.gif">
        <center><img src="header.jpg" border="2"></center>
        <marquee style="color:white; font-family:Arial">Hematlah BBM agar lingkungan kita tetap lestari</marquee>
      </body>
    </html>

    Hasilnya akan terlihat sebagai berikut:

    Kita lanjutkan di topik bahasan selanjutnya. ■

    Membuat Website Itu Mudah (Bagian VI – Stylesheet)

    Satu hal lagi yang biasa dipergunakan dalam pengaturan website adalah Font Style. Tag yang dipergunakan bisa bermacam-macam, namun yang paling efisien adalah dengan menuliskannya dalam CSS. CSS atau Cascade Style Sheet adalah pengaturan website yang dikumpulkan dalam satu file tersendiri, yang kemudian sering dibaca oleh file HTML sebagai Class. Oleh karena itu, pembelajaran HTML selalu disandingkan dengan pembahasan mengenai CSS.

    Style dapat dimulai dengan memanfaatkan Tag Font, karena Tag Font dapat dipergunakan untuk mengatur jenis huruf, ukuran huruf, warna huruf, dll. Namun, apabila jenis, ukuran, dan warna huruf ini dibuat seragam, lebih baik gunakan Font Style. Style digunakan untuk mengatur tampilan dokumen HTML di web browser secara keseluruhan. Tidak hanya font yang dapat diatur melalui style, tetapi juga warna background, border, dan lain-lain.

    Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:

    1. Inline style

    Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Sehingga inline styles tetap diletakkan di bagian <body>. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag.

    Contoh penerapan inline style pada sebuah paragraf adalah sebagai berikut:

    <html>
    <body>
    Berikut ini adalah contoh penggunaan style pada paragraf:
    <p style=”color: blue; margin-left: 20px; background-color: lightblue”>
    INI ISI PARAGRAF YANG DIBERI STYLE.
    Perhatikan bahwa teks paragraf ini berwarna biru,
    diberi jarak margin sebelah kiri sebesar 20 piksel,
    dan diberi latar belakang warna biru muda.</p>
    </body>
    </html>

    Hasilnya akan terlihat seperti di bawah ini:

    Pada contoh di atas terlihat bahwa atribut Style memiliki jangkauan yang lebih luas dibandingkan dengan Tag Font. Oleh karena itu, pemakaian atribut Style lebih dianjurkan dibandingkan dengan Tag Font. Lebih dari itu, Style bisa lebih efisien dibandingkan dengan Tag Font, karena bisa disimpan dalam bentuk class, yang kemudian bisa dipanggil berdasarkan nama class.

    2. Internal Style Sheet

    Internal style sheet digunakan di dalam satu dokumen HTML dan hanya satu dokumen HTML itu saja yang menggunakan style tersebut.

    Perbedaan Internal Style Sheet dengan Inline Style adalah pada penempatannya. Internal Style Sheet ditempatkan pada bagian Head, di antara Tag <head> dan </head>. Semua bagian body dapat diatur tampilannya melalui Style Sheet ini. Di sini kita mendeklarasikan Style yang dipergunakan di dalam <body> sehingga pada saat bagian body ditampilkan, Style-nya akan mengacu pada Style yang sudah dideklarasikan tersebut.

    Contoh penggunaan Style Sheet:

    <html>
    <head>
    <style type=”text/css”>
    body { color:blue; background-color:lightblue}
    p { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
    </style>
    </head>
    <body>
    <b>
    INI ADALAH TULISAN DENGAN STYLE “body”.</b>
    Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
    Berikut ini adalah contoh penggunaan style sheet pada paragraf:
    <p><b>INI ADALAH PARAGRAF YANG DIBERI STYLE.</b>
    Perhatikan bahwa teks paragraf ini berwarna merah,
    diberi jarak margin sebelah kiri sebesar 20 piksel,
    margin sebelah kanan sebesar 20 piksel,
    dan diberi latar belakang warna pink.</p>
    </body>
    </html>

    Hasilnya akan terlihat seperti di bawah ini:

    Style sheet dalam contoh ini dipergunakan untuk mengatur teks, warna latar belakang, dan margin pada Tag <body> dan Tag <p>. Detil pengaturan style dilakukan pada Tag <style> di bawah Tag <head>. Dengan penulisan style tersebut, maka seluruh tulisan di dalam Tag <body> diatur oleh style “body”, demikian halnya seluruh tulisan di dalam Tag <p> diatur oleh style “p”.

    Bagaimana jika kita ingin menambahkan style lain yang dipergunakan pada tag yang sama? Contohnya jika kita ingin membuat 2 paragraf berbeda warnanya, satu berwarna merah dan satu lagi berwarna hijau. Style dapat dituliskan sebagai Class tersendiri, yang dapat dipanggil melalui atribut class. Contohnya adalah sebagai berikut:

    <html>
    <head>
    <style type=”text/css”>
    body { color:blue; background-color:lightblue}
    .merah { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
    .hijau { color:green; margin-left: 20px; margin-right: 20px; background-color: lightgreen}
    </style>
    </head>
    <body>
    <b>
    INI ADALAH TULISAN DENGAN STYLE “body”.</b>
    Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
    Berikut ini adalah contoh penggunaan style sheet pada paragraf:
    <p class=”merah”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “merah”.</b>
    Perhatikan bahwa teks paragraf ini berwarna merah,
    diberi jarak margin sebelah kiri sebesar 20 piksel,
    margin sebelah kanan sebesar 20 piksel,
    dan diberi latar belakang warna pink.</p>
    <p class=”hijau”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “hijau”.</b>
    Perhatikan bahwa teks paragraf ini berwarna hijau,
    diberi jarak margin sebelah kiri sebesar 20 piksel,
    margin sebelah kanan sebesar 20 piksel,
    dan diberi latar belakang warna hijau muda.</p>
    </body>
    </html>

    Hasilnya akan terlihat seperti di bawah ini:

    Dengan menuliskan style sebagai sebuah Class, maka setiap style dapat dipanggil melalui atribut class pada Tag manapun yang dapat memuat class tersebut. Class tersebut dipanggil pada banyak Tag tanpa ada batasan dengan menuliskan class=”…namastyle…”. Pnulisan format style cukup satu kali saja, yaitu pada Tag <style> di bawah Tag <head>.

    3. External Style Sheet

    External style sheet digunakan untuk membuat format style pada beberapa dokumen HTML  sekaligus, dan hanya satu dokumen stylesheet yang disimpan dalam format file .css

    Keuntungannya tentu saja lebih praktis jika kita menuliskan satu style yang akan dipergunakan secara seragam pada halaman-halaman HTML yang lain. Kenyataannya, pada sebuah website selalu menggunakan style yang seragam. Dengan menuliskan stylesheet pada satu file tersendiri, maka apabila di kemudian hari kita ingin mengubah style, cukup file stylesheet-nya saja yang kita ubah.

    Contoh penggunaan Style Sheet pada halaman HTML:

    <html>
    <head>
    <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
    </head>
    <body>
    <b>
    INI ADALAH TULISAN DENGAN STYLE “body”.</b>
    Tulisan ini berwarna biru dengan latar belakang warna biru muda.<br>
    Berikut ini adalah contoh penggunaan style sheet pada paragraf:
    <p class=”merah”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “merah”.</b>
    Perhatikan bahwa teks paragraf ini berwarna merah,
    diberi jarak margin sebelah kiri sebesar 20 piksel,
    margin sebelah kanan sebesar 20 piksel,
    dan diberi latar belakang warna pink.</p>
    <p class=”hijau”><b>INI ADALAH PARAGRAF YANG DIBERI STYLE CLASS “hijau”.</b>
    Perhatikan bahwa teks paragraf ini berwarna hijau,
    diberi jarak margin sebelah kiri sebesar 20 piksel,
    margin sebelah kanan sebesar 20 piksel,
    dan diberi latar belakang warna hijau muda.</p>
    </body>
    </html>

    Di bagian lain, kita menuliskan isi file terpisah dengan nama persis sama dengan yang ditautkan oleh file HTML sebelumnya, yaitu: mystyle.css. Pada file CSS inilah semua format style dituliskan. Perlu diketahui pula bahwa file ini dapat ditulis dengan notepad dan di-Save As sebagai file dengan extensi .css (Cascade Style Sheet). Isinya adalah sebagai berikut:

    body { color:blue; background-color:lightblue}
    .merah { color:red; margin-left: 20px; margin-right: 20px; background-color: pink}
    .hijau { color:green; margin-left: 20px; margin-right: 20px; background-color: lightgreen}

    Hasilnya akan persis sama dengan sebelumnya. Namun, dengan cara menuliskannya dalam satu file tersendiri, memungkinkan class style yang disebutkan untuk bisa dipanggil oleh banyak file HTML. Asalkan pada setiap file HTML tersebut di bagian Tag <head> disebutkan <link rel=”stylesheet” type=”text/css” href=”namafile.css”>.

    Kita lanjutkan di topik bahasan selanjutnya. ■