Selamat Datang Di Blog "Dadang Suhendra"

Sabtu, 08 Januari 2011

Sistem Muskuloskeletal

(Sistem Kerangka & Otot Kerangka)

Osteologi : cabang ilmu anatomi yang mempelajari tulang.
Tulang atau rangka adalah penopang tubuh manusia. Tanpa tulang, pasti tubuh kita tidak bisa tegak berdiri. Tulang mulai terbentuk sejak bayi dalam kandungan, berlangsung terus sampai dekade kedua dalam susunan yang teratur.
Mengapa kita bisa bergerak? Manusia bisa bergerak karena ada rangka dan otot. Rangka tersebut tidak dapat bergerak sendiri, melainkan dibantu oleh otot. Dengan adanya kerja sama antara rangka dan otot, manusia dapat melompat, berjalan, bergoyang, berlari, dan sebagainya. Berikut dijelaskan mengenai rangka tubuh manusia.
Rangka tubuh manusia memiliki fungsi utama sebagai berikut:
  1. Memberi bentuk tubuh. Rangka menyediakan kerangka bagi tubuh sehingga menyokong dan menjaga bentuk tubuh.
  2. Tempat melekatnya otot. Tulang-tulang yang menyusun rangka tubuh manusia menjadi tempat melekatnya otot. Tulang dan otot ini bersama-sama memungkinkan terjadinya pergerakan pada manusia.
  3. Pergerakan. Pergerakan pada hewan bertulang belakang (vertebrae) bergantung kepada otot rangka, yang melekat pada rangka tulang.
  4. Sistem kekebalan tubuh. Sumsum tulang menghasilkan beberapa sel-sel imunitas. Contohnya adalah limfosit B yang membentuk antibodi.
  5. Perlindungan. Rangka tubuh melindungi beberapa organ vital yakni:
    • Tulang tengkorak melindungi otak, mata, telinga bagian tengah dan dalam.
    • Tulang belakang melindungi sumsum tulang belakang.
    • Tulang rusuk, tulang belakang, dan tulang dada melindungi paru-paru dan jantung.
    • Tulang belikat dan tulang selangka melindungi bahu.
    • Tulang usus dan tulang belakang melindungi sistem ekskresi, sistem pencernaan, dan pinggul.
    • Tulang tempurung lutut dan tulang hasta melindungi lutut dan siku.
    • Tulang pergelangan tangan dan pergelangan kaki melindungi pergelangan tangan dan pergelangan kaki.
6. Produksi sel darah. Rangka tubuh adalah tempat terjadinya haematopoiesis, yaitu tempat pembentukan sel darah.          Sumsum tulang merupakan tempat pembentukan sel darah. Terutama di tulang pipih contoh : tulang dada / pada corpus sterni
7. Penyimpanan. Matriks tulang dapat menyimpan kalsium dan terlibat dalam metabolisme kalsium. Sumsum tulang mampu menyimpan zat besi dalam bentuk ferritin dan terlibat dalam metabolisme zat besi.
Rangka manusia dapat dikelompokkan menjadi dua bagian yaitu bagian poros tubuh (aksial) dan bagian alat gerak (apendikular). Bagian aksial terdiri atas 80 tulang pada manusia dewasa umumnya. Sedangkan bagian apendikular terdiri atas 126 tulang pada manusia dewasa umumnya.
Bagian aksial terdiri dari:
1. Tulang tengkorak terdiri dari:
a. Tulang tempurung kepala (os cranium)
  • Tulang dahi (os frontale)
  • Tulang kepala belakang (os occipitale)
  • Tulang ubun-ubun (os parietale)
  • Tulang tapis (os ethmoidale)
  • Tulang baji (os sphenoidale)
  • Tulang pelipis (os temporale)
b. tulang muka (os splanchocranium)
  • Tulang hidung (os nasale)
  • Tulang langit-langit (os pallatum)
  • Tulang air mata (os lacrimale)
  • Tulang rahang atas (os maxilla)
  • Tulang rahang bawah (os mandibula)
  • Tulang pipi (os zygomaticum)
  • Tulang lidah (os hyoideum)
  • Tulang pisau luku (os vomer)










2. Tulang dada (os sternum). Tulang dada terdiri dari tiga bagian yaitu:
  • hulu (os manubrium sterni)
  • badan (os corpus sterni)
  • taju pedang (os xiphoid prosesus)












3. Tulang rusuk (os costae)
  • Tulang rusuk sejati (os costae vera)
  • Tulang rusuk palsu (os costae sporia)
  • Tulang rusuk melayang (os costae fluctuantes)
4. Tulang belakang (os vertebrae)
Sebuah tulang punggung terdiri atas dua bagian yakni bagian anterior yang terdiri dari badan tulang atau corpus vertebrae, dan bagian posterior yang terdiri dari arcus vertebrae. Arcus vertebrae dibentuk oleh dua “kaki” atau pediculus dan dua lamina, serta didukung oleh penonjolan atau procesus yakni procesus articularis, procesus transversus, dan procesus spinosus. Procesus tersebut membentuk lubang yang disebut foramen vertebrale. Ketika tulang punggung disusun, foramen ini akan membentuk saluran sebagai tempat sumsum tulang belakang atau medulla spinalis. Di antara dua tulang punggung dapat ditemui celah yang disebut foramen intervertebrale.
  • Tulang leher (os cervical)              C 1-7
  • Tulang punggung (os thoraxalis)  Th 1-12
  • Tulang pinggang (os lumbar)        L  1-5
  • Tulang kelangkang (os sacrum)     S  1-5
  • Tulang ekor (os cocigeus)            Co 1-5











5. Tulang gelang bahu
  • Tulang belikat (os scapula)
  • Tulang selangka (os clavicula)
6. Tulang gelang panggul
  • Tulang usus (os illium)
  • Tulang pinggul (os pelvis)
  • Tulang duduk (os ichium)
  • Tulang kemaluan (os pubis)
Bagian apendikuler terdiri dari:
1. Tulang lengan
  • Tulang lengan atas (os humerus)
  • Tulang hasta (os ulna)
  • Tulang pengumpil (os radius)
  • Tulang pergelangan tangan (os carpal)
  • Tulang telapak tangan (os metacarpal)
  • Tulang jari tangan (os phalanges manus)

2. Tulang tungkai
  • Tulang paha (os femur)
  • Tulang tempurung lutut (os patella)
  • Tulang kering (os tibia)
  • Tulang betis (os fibula)
  • Tulang pergelangan kaki (os tarsal)
  • Tulang telapak kaki (os metatarsal)
  • Tulang jari kaki (os phalanges pedis)

Pertumbuhan tulang
Pertumbuhan tulang selengkapnya terbentuk pada umur lebih kurang 30 tahun. Setelah itu ada juga perubahan yang disebut remodelling. Tulang merupakan reservoir terbesar dari kalsium dan phosphate. 99% kalsium terdapat di tulang (1000 gram) dari jumlah kalsium tubuh, sedangkan phosphate dalam tulang mencapai 90% dari phosphate dalam tubuh.
Jenis tulang
Dari segi bentuk, tulang dapat dibagi menjadi: tulang pipa / panjang (seperti tulang hasta dan tibia), tulang pipih (seperti tulang rusuk, tulang dada), dan tulang pendek (tulang-tulang telapak tangan, pergelangan tangan)

Myologi :
Cabang ilmu anatomi yang mempelajari tentang otot & struktur yang ada hubungannya dengan otot, misal : tendo, aponeurosis, bursa dan fascia
Tendon adalah serabut yang keras berupa jaringan ikat fibrosa yang biasanya menghubungkan otot ke tulang dan mampu bertahan terhadap ketegangan.
Tendon mirip dengan ligamen dan fascia karena mereka semua terbuat dari kolagen di mana ligamen menghubungkan satu tulang ke tulang yang lain, sedangkan fascia menghubungkan otot ke otot lain.
3 tipe otot
  1. Otot skelet / seran lintang / otot lurik
Memiliki desain yang efektif untuk pergerakan yang spontan dan membutuhkan tenaga besar. Pergerakannya diatur sinyal dari sel syaraf motorik. Otot ini menempel pada kerangka dan digunakan untuk pergerakan.
2. Otot polos
Otot yang ditemukan dalam intestinum dan pembuluh darah bekerja dengan pengaturan dari sistem saraf tak sadar, yaitu saraf otonom. Otot polos dibangun oleh sel-sel otot yang terbentuk gelondong dengan kedua ujung meruncing,serta mempunyai satu inti
3. Otot jantung
Otot yang ditemukan dalam jantung ini bekerja secara terus-menerus tanpa henti, pergerakannya tidak dipengaruhi sinyal saraf pusat

Menurut fungsinya :
  • otot sadar       : dipengaruhi syaraf pusat dan sum-sum tulang belakang
  • otot tak sadar : dipengaruhi syaraf otonom

Struktur otot
  • Tiap serabut terdiri : Dinding sel ( sarcolema ), Plasma sel  (sarcoplasma ), Inti sel (nucleus)
  • Tiap sel otot (seran lintang ) dibungkus jaringan ikat longgar yang disebut : endomysium
  • · Beberapa serabut otot dibungkus : perimysium
  • · Beberapa kelompok serat otot dibungkus : epimysium 

Sistem Saraf

Sistem saraf pada manusia dibagi menjadi  dua,  yaitu :
        1. Sistem Saraf Pusat  (SSP) : saraf otak dan saraf sumsum tulang belakang,
        2. Sistem Saraf Tepi  ( termasuk di dalamnya : Sisrem Saraf Otonom )
Sel saraf atau neuron berfungsi mengirimkan pesan (impuls) yang berupa rangsang atau tanggapan.
Struktur
  • Setiap neuron terdiri dari satu badan sel yang di dalamnya terdapat sitoplasma dan inti sel.
  • Dari badan sel keluar dua macam serabut saraf, yaitu dendrit dan akson (neurit).
  • Dendrit berfungsi mengirimkan impuls ke badan sel saraf, Akson berfungsi mengirimkan impuls dari badan sel ke jaringan lain.
  • Akson biasanya sangat panjang, Dendrit pendek.
  • Pada bagian luar akson terdapat lapisan lemak disebut mielin yang merupakan kumpulan sel Schwann yang menempel pada akson.
  • Sel Schwann adalah sel glia yang membentuk selubung lemak di seluruh serabut saraf mielin.  Membran plasma sel Schwann disebut neurilemma.
  • Fungsi mielin adalah melindungi akson dan memberi nutrisi. Bagian dari akson yang tidak terbungkus mielin disebut nodus Ranvier, yang berfungsi mempercepat penghantaran impuls.
Kelompok sel saraf
  • Sel saraf sensorik : menghantar impuls dari reseptor ke sistem saraf pusat.
  • Sel saraf motorik  : mengirim impuls dari sistem saraf pusat ke otot atau kelenjar yang hasilnya berupa tanggapan tubuh terhadap rangsangan.
  • Sel saraf intermediet : = sel saraf asosiasi,  ditemukan di dalam sistem saraf pusat ,  menghubungkan sel saraf motor dengan sel saraf sensori atau berhubungan dengan sel saraf lainnya yang ada di dalam sistem saraf pusat.
Kelompok-kelompok serabut saraf, akson dan dendrit bergabung dalam satu selubung dan membentuk urat saraf. Sedangkan badan sel saraf berkumpul membentuk ganglion atau simpul saraf.
PROSES PENGHANTARAN IMPULS  : Rangsangan —-melalui neuron aferen —- reseptor —- SISTEM SARAF PUSAT—- melalui neuron eferen- — efektor —-  gerak
Otak
  • Otak mengatur dan mengkordinir sebagian besar gerakan, perilaku dan fungsi tubuh homeostasis seperti detak jantung, tekanan darah, keseimbangan cairan tubuh dan suhu tubuh.
  • Otak juga bertanggung jawab atas fungsi seperti pengenalan, emosi. ingatan, pembelajaran motorik dan segala bentuk pembelajaran lainnya.
  • Otak terbentuk dari dua jenis sel : glia dan neuron. Glia berfungsi untuk menunjang dan melindungi neuron, sedangkan neuron membawa informasi dalam bentuk pulsa listrik yang di kenal sebagai potensial aksi.
  • Mereka berkomunikasi dengan neuron yang lain dan keseluruh tubuh dengan mengirimkan berbagai macam bahan kimia yang disebut neurotransmitter . Neurotransmitter ini dikirimkan pada celah yang di kenal sebagi sinapsis.
BAGIAN UTAMA OTAK
OTAK DEPAN (Fore Brain)
  • TELENCEPHALON : Kortek, Serebri (pusat rasional), Ganglia
  • DIENCEPHALON    : Talamus, Hipotalamus
OTAK TENGAH ( Mid – Brain )
  • MESENCEPHALON :  Tektum,  Tegmentum
OTAK BELAKANG (Hind – Brain )
  • METENCHEPHALON :  Serebellum ( Keseimbangan ), Pons / Batang Otak
  • MYELENCEPHALON : Medulla Oblongata
Serebellum (otak kecil)
  • Kerusakannya menyebabkan gangguan gerakan berdiri, berjalan dan gerakan-gerakan terkoordinasi
  • Menerima info dari visual, auditory, vestibular dan somatosensoris
Pons
  • Merupakan tonjolan besar pada batang otak antara Mesencephaion dan Medulla Oblongata
  • Didalamnya terkandung bagian dari Formatio Retikularis dan beberapa inti yang penting dalam mengatur tidur dan jaga (arousal)
Medulla Oblongata
  • Bagian ter-caudal dari batang otak
  • Mengandung bagian dari Formatio Retikularis dan inti yang mengatur fungsi vital seperti sistem kardiovaskular, pernafasan dan tonus otot rangka
Pelindung otak / sumsum tulang
  1. Kranium / tulang vertebra
  2. Meningea / selaput otak
  3. LCS ( Liquor CerebroSpinal )
Meningea :
  1. Duramater
    • Luar    :   melapisi tengkorak
    • Dalam : – membentuk falk serebri, falk serebelli, tentorium serebellin . Membentuk sinus sagitalis / longitudinalis superior & inferior
  2. Arakhnoid  : Terdapat granulasi arackhnoid, dilalui LCS
  3. Piamater  : Melekat pada otak / sumsum tulang
LCS ( Liquor CerebroSpinal )
  • Berada pada rongga-rongga otak (ventrikel) di dalam ruang subarakhnoid
  • Diproduksi oleh plexus khoroid
  • Di dalam sumsum tulang berada di kanalis sentralis & ruang subarakhnoid
  • Sifat : bening, alkali, tekanan 60 – 140 mm air
  • Fungsi : buffer, bantalan fisik, nutrisi jaringan syaraf
  • Pemeriksaan dengan punksi Lumbal ( VL 1-2) dan punksi fontanel
Medulla Spinalis
Medulla Spinalis merupakan bagian dari Susunan Syaraf Pusat. Terbentang dari foramen magnum sampai dengan L1 (lumbal 1). Terdapat 31 pasang syaraf spinal:
  • 8   pasang syaraf servikal,
  • 12 pasang syaraf torakal,
  • 5   pasang syaraf lumbal,
  • 5   pasang syaraf sakral dan
  • 1   pasang syaraf koksigeal.
Akar syaraf lumbal dan sakral terkumpul yang disebut dengan Cauda Equina. Setiap pasangan syaraf keluar melalui foramen intervertebral.  Syaraf Spinal dilindungi oleh tulang vertebra dan ligamen dan juga oleh meningen spinal dan LCS ( liquor cerebrospinal ) /CSF (cairan serebrospinal ).
Struktur
Terdapat substansi abu abu ( substansia grisea ) dan substansi putih ( substansia alba ). Substansi Abu-abu membentuk seperti kupu-kupu dikelilingi bagian luarnya oleh substansi putih. Keluar dari medula spinalis merupakan akar ventral dan dorsal dari syaraf spinal.
Substansi abu-abu mengandung badan sel dan dendrit dan neuron efferen, akson tak bermyelin, syaraf sensoris dan motoris dan akson terminal dari neuron. Substansi abu-abu membentuk seperti huruf H dan terdiri dari tiga bagian yaitu: anterior, posterior dan Comissura abu-abu. Bagian Posterior sebagai input / afferent, anterior sebagai Output / efferent, comissura abu – abu untuk refleks silang dan substansi putih merupakan kumpulan serat syaraf bermyelin.
Peran medulla spinalis
  1. Pusat prosesing data
  2. Jalur sensoris
  3. Sistem piramidal dan ekstrapiramidal
Reflek spinal
Refleks merupakan respon bawah sadar terhadap adanya suatu stimulus internal ataupun eksternal untuk mempertahankan keadaan seimbang dari tubuh. Refleks yang melibatkan otot rangka disebut dengan refleks somatis dan refleks yang melibatkan otot polos, otot jantung atau kelenjar disebut refleks otonom atau visceral.
Sistem saraf otonom
  • Menyatu dengan jalur pada sistem saraf tepi
  • Mengendalikan terutama organ-organ dalam seperti : Kelenjar, Pembuluh darah, Jantung, Paru-paru, Usus, yang membutuhkan kerja secara terus-menerus / dinamis dan secara tak sadar
Sistem saraf otonom
  1. Sistem simpatis : serangkaian urat kembar bermuatan ganglion, letak : Cerviko-Thorako-Lumbal di depan kolumna vertebralis
  2. Sistem parasimpatis  : Letak : Cranio-Sakral
Saraf kepala : saraf yang dipercabangkan langsung dari otak dan dominan mensarafi bagian-bagian kepala.

Jumat, 07 Januari 2011

HTML


Bengkel Internet STMIK BANI SALEH Cascading Style Sheets

CASCADING STYLE SHEETS (CSS)

Tujuan :
1. Memahami tentang konsep CSS
1. Memahami aturan penulisan pada CSS
2. Memahami selector sebagai pengontrol design
3. Memahami pembuatan background
4. Memformat text pada web
5. Memahami pengaturan bentuk font
6. Membuat pengaturan tabel dan pewarnaannya
7. Membuat hyperlink dan tombol yang menarik 


I. KONSEP CSS 

Apa itu CSS :
        Feature untuk membuat dynamic HTML.
        Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
        Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan
        berwarna biru)
        Support ke semua browser.

Aturan penulisan :
        Nilai untuk property tidak boleh dalam tanda petik. 
        contoh :    color : green;
        Nama property bersifat case sensitive.
                  color : green;
        property : color
        value   : green

Cara penggunaan CSS :
        External Style Sheet
        Bentuk :
                  <link rel="stylesheet" type="text/css"  href="css_files.css">
        dimana :
              <link, merupakan tag pembuka diakhiri dengan tanda ">"
               rel="stylesheet", menerangkan halaman ini akan dikenai efek style sheet
               type="text/css", file yang dipanggil berupa css
               href="css_files.css", alamat dokumen stylesheet yang dipanggil
        




       Contoh Penggunaan :
        script efek.css
        
        body {
            color: green;
            background: white; 
            font-family : arial;
          }
        
              <HTML>
                <HEAD>
                <TITLE>centranet</TITLE>
                 <LINK REL="STYLESHEET"  TYPE="text/css" HREF="efek.css">
                </HEAD>
                <BODY>
                  
              <H1>STMIK BANI SALEH</H1>
                  
              <P> STMIK BANI SALEH adalah kampus teknik yang
              concern ke bidang Teknik Informatika
              </BODY>


        Internal Style Sheet
        Bentuk umum :                            
        <style type="text/css">                    
          ...definisi style...                     
        </style>                             
        Contoh Penggunaan :      
<HTML> 
<HEAD> 
 <TITLE>centranet</TITLE> 
      <STYLE type="text/css">
                                                     body {

                     color: white;
                                                      background: green;
                                                            font-family : arial;    
                                                    }
                                                    </STYLE>
                                                    </HEAD>
                                                    <BODY>
                                                      
                                                  <H1>Zefnet</H1>
                                                      
                                                  <P>Zefnet adalah sebuah web Developer dan Linux Center
                                                  </BODY>
                                                  </HTML>

        Inline Style sheet
        Contoh Penggunaan :
        
           <HTML>
             <HEAD>
             <TITLE>centranet</TITLE>
           
             </HEAD>
             <BODY style="color: white; 
               background: green; 
               font-family : arial;" >
           <H1>ZEFNET</H1>
           <P>ZEFNET adalah sebuah web
           Developer dan Linux Center
           </BODY>
           </HTML>
                                                                                                             

II. ATURAN PENULISAN PADA CSS 

       Syntaxis CSS dibagi dalam 3 bagian :
       
       selector {property : value}

dimana :
       selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
       property : atribut yang akan diubah

Cara penulisan :
       FONT-FAMILY : sans-serif;             
       FONT-SIZE : small;

Cara penulisan yang salah :
       FONT-FAMILY : "sans-serif";                    
       FONT-SIZE : `small';

Cara mendeklarasikan kelompok : (tanda koma serta &)
       H1, H2 {color : green};
       H3, H4 & H5 {color : red};

Cara menuliskan komentar :
           •  Menggunakan tanda : /* ..... */
           •  Menggunakan tanda : <!--           - - >

Bentuk ukuran : 
                  Ukuran                          Keterangan
                 em         Untuk menentukan ukuran yang pecahan (desimal)
                 ex         x-height, digunakan untuk menentukan ukuran yang
                            sifatnya vertikal
                 px         Pixels, menentukan ukuran yang bersifat pixel (layar
                            monitor) seperti ukuran huruf.



III. SELECTOR SEBAGAI PENGONTROL DESIGN 

1. Selector untuk merubah body.                          
<HTML>                                                   
       <HEAD>                                           
               <TITLE> Selector   </TITLE>              
               <style type="text/css">                   
body                                                   
{                                                       
 FONT-FAMILY: Geneva, Arial;                            
 FONT-SIZE: 20px;                                       
   color: red;
                   BACKGROUND-COLOR: green;  } 
  </style>
  </HEAD>
   <BODY> 
  Halaman efect CSS 
    </BODY> 
      </HTML> 
 
 2. Jenis-jenis selector
      a. Selector bebas                                 

<HTML>
<HEAD>                                   
<TITLE> Selector   </TITLE>      
<style type="text/css">                          
gbawah{                                           
TEXT-DECORATION:  underline;                     
}
</style>                                         
</HEAD>                                            
<BODY>                                                    
<gbawah> Efect Garis Bawah dengan
Selector Bebas </gbawah>                                        
</BODY>                                                         
</HTML>      

b. Selector dengan class                 

<HTML>                                                          
        <HEAD>                                     
                <TITLE> Selector   </TITLE>    
<style type="text/css">                          
.right { text-align : right }                    
</style>                                         
</HEAD>                                          
<BODY>                                            
<h2 class="right">Class  Heading 2 </h2> 
<p class="right"> Class  Paragraf</p>            
</BODY>                                          
</HTML>                                          

c. Selector Id               

<HTML>
        <HEAD>                                    
                <TITLE> Selector   </TITLE
> 
<style type="text/css">                            
#BODY_115 {                                              
        FONT-SIZE: 20px;                                        
         TEXT-DECORATION: underline;                            
         COLOR: blue;                                           
FONT-FAMILY:Comic Sans MS;                              
}
</style>                                                         }
</STYLE>                                       
</HEAD>                                            
     <BODY>                                           
                        

IV. MEMFORMAT HALAMAN WEB        
      1. Format dengan margin    

<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;
}
</STYLE>
</HEAD>
<BODY>
Pengaturan Margin Halaman
(1cm,2cm,1cm,2cm)
</BODY>
</HTML> 

2. Pemetaan menggunakan padding 
       Padding hampir sama dengan margin :
a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman. 
b. Padding dapat membuat batasan-batasan pada komponen web lain seperti, tabel di     samping pengaturan batas halaman. 

<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY {
  
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
</BODY> 
   </HTML>  

           Text ini berada di tengah halaman karna di lakukan pengaturan halaman        
sumbu x
dengan menggunakan padding atas 10%,
sumbu y
kanan 20%,bawah 40%,dan kiri 20%.                                               

               
V. MEMBUAT BACKGROUND
1. Background warna    
<HTML>                                                             
<HEAD>                                                           
       <TITLE>Menggunakan Background                                   
                                                                        
Warna</TITLE>                                    
<STYLE type="text/css">                        
        BODY { background-color : yellow}               
       </STYLE> 
</HEAD>
     <BODY>                                                    
Halaman ini di buat Berwarna Kuning                 
</BODY>                                                   
</HTML>                                                   
                                    
2. Background campuran   
<HTML>                                                    
       <HEAD>                                            
<TITLE>Menggunakan Background                    
Warna</TITLE>                                    
      <STYLE ="text/css">                             
body {background-color : #99CCFF}           
          h2 {background : green}                     
h3 {background-color : transparent}          
p {background : rgb(240,248,255)}           
       </STYLE>                                       
</HEAD>                                          
     <BODY>                                             
     <h2>Header 2,Background Hijao</h2>               
     <h3>Header 3 , Bakground Transparan</h3>                  
     <p>Background pada  paragraph</p>                         
     </BODY>                                                    
     </HTML>                                                   
                                                                                
3. Background gambar  

               Properties                          Value                                      Keterangan
      Background - Image                       URL                           Alamat gambar yg dituju 
      Background                                 Repeat                         Diulang 
      Repeat                                         Repeat-x                      Diulang
      Repeat                                         Repeat-y                      Diulang
      No Repeat                                        -                               Tampil 1 gambar
      Background Position:                  top left                          Atas kiri hal
                                                          top center                     Atas tngh hal
                                                          top right                        Atas kanan hal
                                                          center left                    Tgh kiri hal 
                                                          center center               Pusat hal 
                                                          center right                  Tngh kanan hal 
                                                          bottom left                    Bwh kiri hal 
                                                          bottom center              Bwh tgh hal 
                                                          bottom right                 Bwh kanan hal 
Contoh 1 :
<HTML
> 
<HEAD
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{

background-image:
url("drums.jpg");
background-repeat: repeat-x;
}
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
</BODY>
</HTML>
 
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Menggunakan Background Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg")
background-repeat: no-repeat;
background-position: center center;
}


VI. FORMAT TEXT PADA WEB         
                    
Contoh 1 :
<HTML>                                                                
HEAD>                                                              
< 
<TITLE>Format Text </TITLE>                                         
<STYLE ="text/css">                                          
   p {color : green; letter-spacing: 0.5cm}                   
h4 {letter-spacing: -2px}                                  
NONE</a></p>

  </HEAD>
</STYLE>                                                    
<BODY>                                                         
<p>Pengaturan Spasi Pada Paragraph                  
</p>                                                
<h4> Header 4</h4>                                    
</BODY>                                                         
</HTML>                                                         
      
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</STYLE>
</HEAD>
<BODY>
<h1>Header 1,Ditengah</h1>
<h2>Header 2 , Di kiri</h2>
<h3>Header 3 ,Di kanan</h3>
</BODY>
</HTML> 

 
Contoh 3 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">

em {text-decoration : overline}
h2 {text-decoration: blink}
h3 {text-decoration: underline}
a {text-decoration: none}
</STYLE>
</HEAD>
<BODY>
<em>Bentuk Overline</em>
<h2>Header 2, Bentuk Line-through</h2>
<h3>Header 3,Bentuk
<p> <a href="http://lecturer.eepis-UNSADA.edu/~zenhadi">Penggunaan Dalam Link,Nilai
</BODY>
</HTML> 

Contoh 4 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p.besar {text-transform: uppercase}
p.kecil {text-transform: lowercase}  
</STYLE>                                                   
</HEAD>                                                   
<BODY>                                                      
Normal
<p class="besar">                                           
pengubahan kedalam hurup Besar                              
class="oblique">Menggunakan Style
</p>                                                        
<p class="kecil">                                           
pengubahan kedalam huruf kecil
</p>                                                         
</BODY>                                                     
</HTML>          

                                            
   VII. PENGATURAN FONT                                                     

 
Contoh 1 :                                                    
<HTML>                                                        
<HEAD>
<TITLE>Pengaturan Font</TITLE>                                    
          <STYLE ="text/css">                                       
          p.italic 
          {                                                         
          font-size :200 % ;                                        
font-style: italic;
}
          p.normal{
font-family : verdana ;                            
          font-style: normal;                                
          }                                                  
          p.oblique {font-style: oblique}                    
  </STYLE>                                                    
  </HEAD>
  </HTML>

Contoh 2 :
<HTML>
<HEAD>
<TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
p.normal 
{
font-family : verdana ;
font-weight: normal;
}
p.thick
{
font-family : verdana ;
font-weight: bold;
}
p.thicker
{
font-family : times ;
font-weight: 900;
}
</STYLE>
</HEAD>
<BODY>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
<p class="thicker">This is a paragraph</p>

</BODY>
 </HTML>
 
         
  VIII. PENGATURAN TABEL                                         
  
1. Pengaturan padding     
   
<HTML>                                             
<HEAD>                                         
<TITLE>Pengaturan Padding Table</TITLE>        
<style type="text/css">                    
td.kiri{                                   
        padding-top: 2cm;                           
        padding-right: 2cm;
        padding-bottom: 2cm;                      
        padding-left: 2cm ;                               
        background-color : #F0F8FF;                
        }                                        
        </style>                                  
</HEAD>                                        
<BODY>                                             
<TABLE  BORDER="1">                                  
<TR>                                               
<TD class="kiri">Pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah</TD>                  
<TD>Tanpa jarak </TD>                      
  </TR>                                            
</TABLE>                                             
</BODY>                                               
</HTML>                                              
                             
 
2. Menggunakan file css untuk mempercantik pembuatan tabel
    
 /* CSS Document */                                  
File table_specbody.css      
                        
TH {                                               
color : #FFFFFF;                           
background-color : #336699;                  
border-width: 1px ;                          
border-style:solid;                          
border-color :red ;                          
font-size: 9pt;                            
}
TD {                                             
color : red;                             
background-color : #E6E6FA; 
border-width: 1px
border-style:solid;
border-color :blue ;
font-size: 9pt;
}

File html yang akan memanggil file css  
  
<HTML>
<HEAD>
<TITLE>Pengaturan  Table spec</TITLE>
<LINK REL="STYLESHEET"
TYPE="text/css"
HREF="table_specbody.css">
</HEAD>
<BODY>
<table width="468" border="0"
cellpadding="5" cellspacing="0" >
<tr> 
<th width="112" >Nama Computer</th>
<th width="91">Prossesor</th>
<th width="96">Ram</th>
<th width="137" >System Operasi</th>
</tr> 

<tr> 
<td>Clnt-1</td>
<td >IP 4 1,8 Ghz</td>
<td >10 GB</td>
<td >Redhat Linux</td>
</tr> 

<tr> 
<td >Clnt-2</td>
<td >IP 2 Ghz C</td>
<td >6 GB</td>
<td >Mandrake Linux</td>
</tr> 

<tr> 
<td >Clnt-2</td>
<td >XP 2000+ </td>
<td >20 GB</td>
<td>Windows</td>
</tr> 

     </table>
   </BODY>
</HTML>


IX.PENGATURAN HYPERLINK & TOMBOL YG MENARIK                                           

Syntax penulisan pada CSS :                        
          a:link {property : value}                          

                       Selector                                              Keterangan                           
  
                         a:link                                     Keadaan awal pemicu link aktif                  
                         a:visited                                Keadaan pemicu link setelah dikunjungi                          a:active                                 Keadaan pemicu yang sedang aktif         
                         a:hover                                 Kejadian pada pemicu link saat mouse                                                           digerakkan diatasnya                            
                                                               
 
1. Penggunaan property selector                                               

 <HTML>                                                           
          <HEAD>                                                     
<TITLE>Pengaturan pada  link</TITLE>                     
<STYLE type="text/css">                                    
/*Konversi pengaturan Link pada contoh sebelumya menggunakan css */ 
          A:link {color : green;}                            
A:hover { color : pink;}                            
          </STYLE>                                            
</HEAD>                                             
<BODY>                                                       
<a href="http://lecturer.eepis-UNSADA.edu/~zenhadi"              
target="_self">Contoh Hyperlink menggunakan                  
CSS</a>                                                      
</BODY>                                                               
</HTML>                                                              
      
2. Pembuatan tombol dengan tabel  
   
<HTML>                                                               
<HEAD>                                                      
<TITLE>Pengaturan Pada Link Background</TITLE>                                                   
<STYLE ="text/css">                                                 
A:link {text-decoration: none}                                   
A:visited {text-decoration: none}                                
A:active {text-decoration: none}                                 
#22476C;
A:hover {                                                        
font-weight:none;                                                
color: red;                                                      
background-color:blue;}
color:#EDEDED;                               
text-decoration:none;                        
}
.leftlinks a:link {                                  
color:#EDEDED;                               
}
.leftlinks a:visited {                                
color:#EDEDED;                                
}
.leftlinks a:hover {                                 
display:block;                               
margin:3px 0px;                              
border-top:1px solid #22476C;                
border-left:1px solid #22476C
border-bottom:1px solid #4C86C0;             
border-right:1px solid #4C86C0
padding: 5px 9px 3px 11px;                   
text-align:center;                           
background-color:#336699;                    
color:#EED929;                               
text-decoration:none;                        
}

b. Pembuatan file HTML utk memanggil css
 
<HTML>
  <HEAD>
  <TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE>
 
 <LINK REL="STYLESHEET"
TYPE="text/css"
HREF="link_frtombol.css">
 
  </HEAD>
<BODY>

  <div class="leftlinks"> 
    <a href="index.htm">Teras Wamika</a> 
    <a href="profil.htm">Pssrofil Organisasi</a> 
    <a href="struktur.htm">Struktur</a> 
    <a href="pembimbing.htm">Pembimbing Organisasi</a> 
    <a href="dpo.htm">DPO Organisasi</a> 
    <a href="kegiatan.htm">Kegiatan Rutin</a>
    <a href="berita.htm">Berita UKM</a>
  </div>