CASCADING STYLE SHEET

Cascading Style Sheet

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

Rekomendasi CSS menguraikan tiga jenis style:

• 
  
  
  
  Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
• 
  
  
  
  Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
• 
  
  
  
  Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Contoh pembuatan desain layout halaman web dengan HTML

Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :

1. 
   
   
   
   Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:

#wrapper {

margin: auto;

width: 750px;

border: 1px solid red;}

#header {

height: 85px;

border: 1px solid blue;}

#inner {

float: left;

margin: 5px 0;

border: 1px solid black;}

#sidebar {

float: left;

margin-right: 20px;

width: 200px;

height: 357px;

border: 1px solid red;}

#top {

float: left;

width: 524px;

height: 120px;

border: 1px solid red;}

#content {

float: left;

margin-right: 20px;

width: 275px;

height: 235px;

border: 1px solid green;}

#right {

float: right;

width: 227px;

height: 180px;

border: 1px solid red;}

#footer {

clear: both;

height: 75px;

border: 1px solid blue;}

Simpan dengan nama cobatgs dan ber-ekstensi css. (cobatgs.css)

2. 
   
   
   
   Selanjutnya ketikkan kode berikut ini juga :

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Header

Sidebar

Top

Content

Right

Footer

Simpan file dalam bentuk html (cobatgs.html)

3. 
   
   
   
   Buka file html, maka hasilnya adalah :
     
   
   
    4.  Langkah selanjutnya adalah membuat isi dari setiap kolom-kolom yang telah ada, misalnya dengan cara mengetikkan kode berikut ini pada file cobatgs.css yang sebelumnya :
   
   
   
   
   #wrapper {
   margin: auto;
   width: 1000px;
   border: 1px solid white;
   }
   #header {
   height: 100px;
   background: #99CC00;
   border: 1px solid white;
   }
   #inner {
   float: left;
   margin: 3px 0;
   border: 1px solid white;
   }
   #sidebar {
   float: left;
   margin-right: 5px;
   width: 175px;
   height: 357px;
   background: #CCFF99;
   border: 1px solid white;
   }
   
   
   #top {
   float: left;
   width: 813px;
   height: 140px;
   background: #FFFFCC;
   border: 1px solid white;
   }
   
   
   #content {
   float: left;
   margin-right: 5px;
   width: 410px;
   height: 215px;
   background: #FFFFCC;
   border: 1px solid white;
   }
   
   
   #right {
   float: right;
   margin-left: 5px;
   width: 390px;
   height: 215px;
   background: #FFFFCC;
   border: 1px solid white;
   }
   
   
   #footer {
   clear:both;
   height: 50px;
   background: #6cae15;
   border: 1px solid white;
   }
   
   
   #leftmenu ul {
   width: 175px;
   list-style-type:none;
   padding:0; margin:0;
   }
   #leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
   padding-left: 15px;
   text-decoration: none;
   }
   #leftmenu a {
   padding: 5px 0px 5px 15px; display: block;
   background: #6cae15 no-repeat left center;
   margin: 0px 0px 1px; color: #ffffff;
   }
   #leftmenu a:hover {
   background: #5e9711 no-repeat left center; color: #ffffff
   }
   
   
   #box1 {
   float: left;
   margin-right:10px;
   width: 91px;
   height: 98px;
   background: #FFFFFF;
   border: 1px solid white;
   }
   
   
   #box2{
   float: right;
   margin-right: 20px;
   margin-top: 7px;
   width: 60px;
   height: 20px;
   background: #99CC00;
   border: 1px solid #99CC00;
   }
   
   
   #box3{
   float: right;
   margin-right: 5px;
   margin-top: 7px;
   width: 35px;
   height: 20px;
   background: #99CC00;
   border: 1px solid #99CC00;
   }
   
   
   #box4{
   float: right;
   margin-right: 5px;
   margin-top: 7px;
   width: 32px;
   height: 20px;
   background: #99CC00;
   border: 1px solid #99CC00;
   }
   
   
   #box5{
   float: right;
   margin-right: 15px;
   margin-top: 7px;
   width: 100px;
   height: 20px;
   background: #FFFFFF;
   border: 1px solid #99CC00;
   }
   #box6{
   float: right;
   margin-right: 5px;
   margin-top: 7px;
   width: 50px;
   height: 20px;
   background: #99CC00;
   border: 1px solid #99CC00;
   }
   
   
   #box7 {
   float: left;
   margin-right: 5px;
   margin-top: 2px;
   width: 300px;
   height: 85px;
   background: #FFFFCC;
   border: 1px solid #FFFFCC;
   }
   #box8 {
   float: left;
   margin-right: 3px;
   margin-top: 5px;
   width: 406px;
   height: 110px;
   background: #FFFFCC;
   border: 1px solid #FFFFCC;
   }
   #box9 {
   float: left;
   margin-right: 0px;
   margin-top: 5px;
   width: 400px;
   height: 110px;
   background: #FFFFCC;
   border: 1px solid #FFFFCC;
   }
   2. 
      
      
      
      Dan mengetikkan kode berikut pada file html-nya :
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   
   
   
   
   

   
   

   
   

   

   
   

   
   

   

   
   

   
   

   
   

   Search :
   

   
   

   
   

   About Us

   
   

   
   

   
   

   Profil

   
   

   
   

   
   

   Foto

   
   

   
   

   
   

   
   

   
   

   
   

   
   
   
   
   Home
   News and Media
   Articel
   Tutorials
   Tips and Tricks

   
   

   
   

   
   

   
   

   
   

   

   
   

   
   

   

   
   

   
   

   
   

   Temu Kangen

   Buat Sparta-sparti 23, kita-kita mau mengadakan acara ngumpul-ngumpul bareng lho.... satu angkatan.

   Jadi buat temen-temen diharap kedatangannya. Acaranya :

   Hari / Tanggal : Sabtu / 27 Februari 2010

   Jam : 19.00 s/d selesai (subuh)

   Tempat : Pulosari (PS)

   
   

   
   

   Event :

   
   
   
   
   Kuliah Tamu "Video Streaming"
   Electro English Club (E2C)
   Seminar Nasional "Hacking and Security"

   
   

   
   

   
   

   
   

   Sparta & Sparti_23 Corporation

   
   
   
   
   
   
   3. 
      
      
      
      Maka hasilnya adalah :
      
      
      
      
      
      
      

KOMPONEN HTML LANJUT

HTML mempunyai banyak elemen dasar.  Secara garis besar, elemen ini mencakup LINK, TABEL, FRAME, dan FORM. Pada bagian, akan dijelaskan mengenai dasar-dasar dan cara penggunaan elemen dasar TABEL dan FORM.

 Tabel merupakan elemen yang digunakan untuk menghasilkan data dalam bentuk tabular, sehingga dapat menyampaikan informasi secara jelas dan mudah dipahami. Terdapat beberapa tag atau elemen utama yang digunakan dalam pembuatan table :

<TABLE>…</TABLE>, <TH> …</TH, ><TR>…</TR>, dan <TD>…</TD>. 

PENFORMATAN TABLE

Untuk menformat table dapat menggunakan beberapa atribut  dibawah ini :

• align : berfungsi untuk mengatur posisi rata kiri (left), tengah (center) atau kanan (right).
• cellpadding : digunakan untuk mengatur spasi antar border sel dengan isinya.
• cellspacing : digunakan untuk mengatur spasi antar sel.
• width : digunakan untuk menentukan lebar tabel atau sel.
• Merge : digunakan untuk penggabungan sel.
• Rowspan : untuk menggabungkan sel berdasarkan baris.
• Cospan : untuk menggabungkan sel berdasarkan kolom.
• Colgroup : digunakan untuk mengelompokkan berdasarkan kolom.
• Tbody : untuk mengelompokkan berdasarkan kolom.
• Height : untuk menentukan ukuran tinggi sel.
• Nowrap : digunakan untuk membuat isi dari kolom tetap berada pada satu baris.

CONTOH MEMBUAT TABLE BERUPA GRAFIK

Maka dapat dituliskan :

<!DOCTYPE html

                PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Grafik Berbasis Tabel 1</title>

</head>

<body>

<table width="550" height="250">

  <tr>

    <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000

solid;"><b>Perusahaan</td>

    <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>

  </tr>

  <tr >

    <td width="175" >Angin Reebot Ltd </td>

    <td width="25"></td>

    <td width="25"></td>

    <td width="25"></td>

    <td width="25"></td>

    <td width="25"></td>

    <td width="25"></td>

    <td colspan="6" bgcolor="#006712"></td>

    <td width="25">+150%</td>

  </tr>

  <tr>

    <td>Command Prompt, Inc </td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td colspan="4" bgcolor="#006712"></td>

    <td width="25">+55%</td>

    <td width="25"></td>

    <td></td>

  </tr>

<tr>

    <td>Hibernate Ltd </td>

    <td></td>

    <td></td>

    <td></td>

    <td>-23%</td>

    <td colspan="2" bgcolor="#FFE900"></td>

    <td width="15"></td>

    <td width="15"></td>

    <td width="15"></td>

    <td width="15"></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr>

    <td>Shutdown Ltd </td>

    <td></td>

    <td>-75%</td>

    <td colspan="4" bgcolor="#FF0120"></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

    <td></td>

  </tr>

  <tr>

    <td colspan="18" style="border-top:#000000 solid"></td>

  </tr>

</table>

</body>

</html>

Gambar 1. Table berupa grafik

CONTOH MEMBUAT TABLE PERBANDINGAN

Maka dapat dituliskan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Perbandingan Berbasis Tabel 2</title>

</head>

<body>

<table width="500" height="500" border="0">

  <tr>

    <td colspan="10" style="border-bottom:#000000 solid;"><p align="center"><font color="black"     

    face="TIME NEW ROMAN" size"6">PERBANDINGAN FITUR</font></td>

  </tr>

  <tr>

    <td align="center">No</td>

    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>

    <td width="200" align="center">Fitur</td>

    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>

    <td align="center">Enterprise</td>

    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>

    <td align="center">Pro</td>

    <td align="center">Free</td>

  </tr>

  <tr>

    <td colspan="10" style="border-top:#000000 solid thin;"></td>

  </tr>

  <tr>

    <td align="center">1</td>

    <td>Garansi seumur hidup </td>

    <td align="center">X</td>

    <td align="center">-</td>

    <td align="center">-</td>

  </tr>

  <tr>

    <td align="center">2</td>

    <td>Multiuser</td>

    <td align="center">X</td>

    <td align="center">-</td>

    <td align="center">-</td>

  </tr>

  <tr>

    <td align="center">3</td>

    <td>Update otomatis </td>

    <td align="center">X</td>

    <td align="center">X</td>

    <td align="center">-</td>

  </tr>

  <tr>

    <td align="center">4</td>

    <td>Cetak Laporan </td>

    <td align="center">X</td>

    <td align="center">X</td>

    <td align="center">-</td>

  </tr>

  <tr>

    <td align="center">5</td>

    <td>Notifikasi error </td>

    <td align="center">X</td>

    <td align="center">X</td>

    <td align="center">X</td>

  </tr>

  <tr>

    <td colspan="8" style="border-top:#000000 solid thin;"></td>

  </tr>

  <tr>

    <td align="center">6</td>

    <td>Ubah tema </td>

    <td align="center">X</td>

    <td align="center">X</td>

    <td align="center">X</td>

  </tr>

  <tr>

    <td align="center">7</td>

    <td>Try ikon</td>

    <td align="center">X</td>

    <td align="center">X</td>

    <td align="center">X</td>

  </tr>

  <tr>

    <td colspan="8" style="border-top:#000000 solid;"></td>

  </tr>

</table>

</body>

</html>

Gambar 2. Table berupa perbandingan