MODUL VII, WEB 1

BEKERJA DENGAN CSS
 

1.      TUJUAN
Mahasiswa dapat memeprindah dan mengatur halaman web secara praktis dengan menggunakan CSS
2.      TEORI SINGKAT
         CSS atau cascading style sheets digunakan dalam kode html untuk menciptakan suatu kumpulan style yang dapat digunakan untuk memperluas kemampuan html.
         Tag yang digunakan adalah:
         1.      Pasangan …..</style.

         2.      Pasangan

 

         Penulisannya adalah sebagai beriku:

         Nama_taq {property_1: nilai_1;…..; property_n: nilai_n}

 

3.      PRAKTEK

         Di dalam menggunakan css kita dapat menggunakan dua pola. Pola yang pertama yaitu inner, dimana perintah-perintah style css berada di dalam satu file dengan file html yang diaturnya. Sedangkan tipe yang kedua adalah meletakkan peritah-perintah style css berada dalam file tersendiri yang biasanya dituliskan dengan nama file berekstensi css. Sebagaimana kita praktikkan di bawah ini, membuat file css dengan nama ex1.css. File ini berisi script style css yang akan diload pada file html yang akan menggunakannya. File ex1.css ini dapat dimanfaatkan oleh banyak file html juga difungsikan untuk mengatur tampilan web page tersebut. Sehingga dapat kita fahami bahwa cukup efisien apabila kita memanfaatkan file css ini untuk memanipulasi tampilan suatu web. Dengan sekali membuat aturan dapat dimanfaatkan untuk banyak web page.

         Antara file style css dengan file html yang digunakan untuk menghubungkan adalah tag . Ternyata dengan tag ini akan mengarahkan agar web page ini membaca file ex1.css sebagai referensi pengaturan dalam web yang dibuat ini. Dan karena pada tag di atas adalah statemen text maka kita dapat mereferensikan dengan perintah href=ex2.txt dimana yang dijadikan referensi adalah file ex2.txt /file text.

         File ex1. css ini digunakan untuk memformat body secara keseluruhan dengan background layar warna kuning/yellow. Dan tiga buah style yang lain adalah h1 yang digunakan untuk memformat besarnya font menjadi 36 pixel, style h2 dengan pengaturan warna text adalah berwarna biru dan letak posisi di sebelah kiri menjorok sebesar 50 pixel.

 

Membuat file css dengan nama ex1.css:

body {background-color: yellow}

h1{font-size: 36}

h2 {color: blue}

p {margin-left: 50px}

 

Membuat file.html

Tulisan ini berukuran 36

Tulisan ini berwarna BIRU 36

Ini paragraf dengna left margin 50 pixel

 

Cara penggunaan style tersebut adalah meletakkan tag-tag yang didefinisikan pada file css atau txt pada text yang akan ditampilkan sesuai dengan bentuk yang diharapkan dari style. Karena di depan ”Tulisan ini berukuran 36” ada tag

maka tulisan tersebut akan diformat dengan font yang berukuran 36 pixel sebagaimana di file css. Kemudian pada baris kedua diberikan tag

maka tulisan tersebut akan diformat dengan dengan besar font sebesar ukuran 20 sebesar

yang artinya heading 2 tetapi menambahnya menjadi warna biru. Sedangkan di depan baris ketiga terdapat tag

dimana fungsi

dalam html ini telah direlasikan dengan file di css agar diletakkan agak menjorok ke dalam 50 pixel.

 

 

Membuat file praktek2.html

Contoh script web di bawah ini menunjukkan bagaimana penulisan style dalam satu file. Tag diletakkan diantara tag dengan . Statemen style yang kita gunakan adalah mengawalinya dengan tag dan menutupnya sebelum tag dengan .

Perintah pertana yang digunakan adalah:

  {background-color:#FF0000}

      Adalah memberikan warna background pada text berwarna merah.

   {background-color:#e0ffff}

      Adalah memberikan warna background pada text berwarna violet.
{background-color:# #b0c4de }

      Adalah memberikan warna background pada text berwarna biru muda/aqua.
Tapi tag-tag pada style di atas tidak ada yang melakukan pengaturan warna font sehingga warna font tetap berwarna hitam. Baiklah kita lihat tampilan web dengan tag style  yang diletakkan menjadi satu dengan web pagenya.

h1

{

background-color:#FF0000;

}

p

{

background-color:#e0ffff;

}

div

{

background-color:#b0c4de;

}

Contoh Background CSS

Ini text yang menggunakan tag div

Ini paragraf yang mempunyai background

Ini masih di taq div

Mengubah h1 sebagaimana di bawah warna font menjadi putih.
Berikut ini tag yang dipergunakan untuk melakukan perubahan terhadap tampilan tag tetapi perintah tersebut dimasukkan ke tag style. Kita hanya perlu menambahkan color pada tag yang kita inginkan. Untuk kali ini kita coba mengubah warna font pada taq

sehingga menjadi sebagaimana di bawah ini. Fungsi color: white adalah script untuk memberikan warna putih pada font yang diberi taq

.

h1
{
color: white;
background-color:#FF0000;
}
Membuat style font normal dan italic.
Terkait dengan cara penulisan/pendefinisian tag style pada suatu css. Kita dapat mendefinisikan sebagaimana di atas sebagai suatu tag, kita juga dapat mendefinisikan tag style tersebut dalam ID maupun bentuk class. Scipt html di bawah ini menggunakan class bentuk umum penulisan class pada tag style dapat dilihat sebagaimana contoh berikut:
Contoh:
.kapital { text-transform: uppercase; }
.kecil { text-transform: lowercase; }
.kapitalis{ text-transform: capitalize; }
.garis_bawah { text-decoration: underline; }
Tag dengan class ini didahului dengan tanda ‘.’ diikuti dengan nama tag baru di antara tanda { dan } dituliskan scipt tagnya.
Kita analisa html di bawah ini dengan tag style menggunakan class normal dan class italic. Dua kelas ini dimanfaatkan untuk mengatur  bentuk tampilan tulisan yaitu normal dan italic atau tulisan miring. Pada saat pemanggilan kita menggunakan statemen class=”nama kelas”. Bentuk perintah di bawah ini memformat agar tulisan pada baris pertama ditampilkan dalam bentuk text normal/biasa dengan adanya tag
. Sedangkan pada text baris ke 2 tampilan huruf dalam bentuk huruf miring atau italic dengan adanya perintah

p.normal {font-style: normal}

p.italic {font-style: italic}

Ini paragraf, dengan font normal.

Ini paragraf, dengan font normal.

Ada bentuk lain perintah/tag pada style yaitu ID dengan menggunakan kode # di depan simbol tag style. Misalnya kita mendefinisikan tag style #Tebal {statemen} maka cara pemanggilannya menggunakan statamen

Gambaran secara umumnya sebagaimana kami contohkan sebagai berikut:

<!–

      #Tebal{font-weight:bold;

                  color:blue;}

      #Miring {font-style:italic;

                  color:green;}

–>

Diatas adalah menciptakan tag style Tebal dan Miring.
Untuk mengetahui perbedaan penggunaan tag id pada style kita coba memodifikasi praktek 3 dengan menggunakan id. Pada saat id ini dipanggil dalam body html dengan

maka format huruf berwarna putih dan background tulisan berwarna merah akan dikenakan pada text yang ditulis setelahnya sampai ada tanda

atau sampai  ada tag pengaturan lain berada di antara tanda tersebut.

pada
Pada style id #Biasa dan #Coba ada script margin-left:-30px adalah menugaskan agar tulisan menjorok dibagian kiri sebanyak 30 titik atau pixel. Titik awal yang digunakan sebagai standar mengkirikan tulisan adalah pengaturan posisi baris sebelumnya. Jadi pabila pada posisi sebelumnya berada 50 pixel sebelah kanan, maka letak baris yang diatur -30px akan berada 30 pixel di sebelah kiri dari 50 pixel atau bisa disebut 20 pixel di sebelah titik paling kiri. Sebagaimana contoh di bawah ini, modifikasi dari html praktek3.html menjadi praktek3Id.html Dapat kita lihat bahwa text ke 3 dengan warna font merah dan background warna kuning. Posisi baris tersebut berada di sebelah kiri baris 2 dan 4 sebanyak 20 pixel.

#Tebal

      {

      color: white;

      background-color:red;

      }

#Biasa

      {

      color:red;

      background-color:yellow;

      margin-left:-30px;

      }

#Coba

      {

      color: white;

      background-color:blue;

      margin-left:50px;

      }

Contoh Background CSS

Ini text yang menggunakan tag div
Ini paragraf yang mempunyai background

Ini masih di taq div

Membuat style besarnya font pada dengan nama file praktek5.html
Tag style yang dipergunakan untuk mengatur besarnya font adalah font-size:[angka] px. Angka adalah bilangan dari 1-tak terhingga, tetapi dalam prakteknya dengan angka 1000 pixel saja kita sudah kesulitan untuk melihatnya, karena kemampuan monitor normal saat ini biasanya kisaran 1024 x 800 pixel saja. Di bawah ini ada tiga pengaturan yaitu h1 dengan besarnya font 40 pixel, h2 sebesar 30 pixel dan p adalah 14pixel. Yang kemudian style tag tersebut diimplementasikan ke wab page di bawah ini pada baris 1, 2 dan ke 3. Dan hasilnya dapat kita lihat di bawah ini.

h1 {font-size: 40px}

h2 {font-size: 30px}

p {font-size: 14px}

Ini heading ukuran 40

Ini heading ukuran 30

Ini heading ukuran 14

Praktek 6.
Jika kita bandingkan dengan scipt pada program praktek6.html dengan praktek6a.html akan terlihat beberapa perbedaan, dimana pada praktek6.html terdapat 6 tag pengaturan sedangkan praktek 6a.html hanya terdapat 3 tag html. Karena tag yang digunakan untuk mengatur color sudah dijadikan satu dengan tag untuk mengatur besaran font . Jika para praktek6.html ini kita perhatikan tidak ada bedanya dengan bila kita menuliskan tag-tag langsung ke html tanpa menggunakan css. Nah, untuk tag pada web praktek6a.html sudah menggunakan tag yang cukup efektif dengan menggabungkan beberapa pengaturan dalam satu tag style saja.

h1 {

font-size: 40px}

h2 {

font-size: 30px}

p {

font-size: 14px

}

clB {color: blue}

clR {color: red}

clA {color: aqua}

 

Ini heading ukuran 40

Ini heading ukuran 30

Ini heading ukuran 14

Buatlah Praktek6a.html sebagaimana perintah di bawah ini agar kita tahu perubahan yang terjadi dengan memakai tag style yang berbeda dengan yang digunakan pada praktek6.html di atas.

h1 {

      color: blue;

      font-size: 40px}

h2 {

      color: red;

      font-size: 30px}

p {

      color: green      ;

      font-size: 14px

      }

 

Ini heading ukuran 40

Ini heading ukuran 30

Ini heading ukuran 14

LATIHAN
Untuk latihan ini menggunakan tag style 4 buah, 1 buah tag style biasa, dan 3 buah class style yang digunakan sebagai pengaturan posisi text. Tag style h1 digunakan untuk menga besaran font yaitu 40 pixel dan warna font menggunakan biru. Tag style class p.center adalah untuk mengatur letak text agar berada di tengah, tag p.right mengatur agar text rata di sisi kanan dan tag justify digunakan untu mengatur agar text rata kanan dan kiri.

h1

      {font-size: 40px;

      color:blue;}

p.center {text-align: center}

p.right {text-align: right}

p.justify {text-align: justify}

 

Contoh text Align dengan CSS

September, 2009

Ada seseorang berkata kepada saya bahwa”
setiap kali Ana merasa ingin mengkritik siapapun”, katanya kepada saya,Ingatlah, bahwa semua orang di dunia ini tidak memiliki kelebihan yang sama seperti yang Anda miliki”, Ingatlah selalu kata-kata itu. Oke….oke…oke…

TUGAS:
Membuat tampilan pada tugas praktikum 4 (membuat tabel) dengan perintah-perintah css.

body{background-color:aqua}

th

      {padding-top:0.25cm;

      padding-left:0.25cm;

      padding-bottom:0.25cm;

      padding-right:0.25cm;

      background-color:red;

      font-family:calibri;

      font-size:20px}

td

      {padding-top:0.15cm;

      padding-bottom:0.15cm;

      background-color:blue;

      font-family:courier new;

      font-size:15px;

      color:yellow;

      align:center}

td.windows

      {border-width: 2px;

      border-style:dotted;

      background-color:gold;

      border-color:green;

      color:red;

      text-decoration:blink;

      text-align:center;

      font-weight:bold;

      font-family:arial bold;

      font-size:20px}

caption.judul

      {background-color:black;

      color:yellow;

      text-decoration:blink;

      font-weight:bold;

      font-family:arial bold;

      font-size:20px}

 

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Daftar Warga
Warga Kota
Klaten Yogya Solo Wonogiri Ponorogo Malang
Jenis Kelamin Pria 30 20 30 22 19 9
Wanita 20 8 18 10 15 18

KESIMPULAN:
  • Perlu banyak menghafal tag-tag maupun selector yang digunakan dalam css ini. Karena sedikit berbeda dengan tag yang berada di html biasa.

Untuk dapat menghafal tersebut kita perlu banyak latihan. Hal ini dilakukan sekaligus karena css ini sangat bermanfaat dan efisien. Khususnya dalam pengembangan web berbasis content. Jika kita lihat dari fungsi style adalah semacam variabel, dimana web page adalah program operasionalnya. Jika kita melakukan sebuah operasi yang  sama persis namun dengan value variabel yang berbeda kita tinggal mengisikannya. Demikian juga css ini, jika kita menginginkan tampilan berbeda namun struktur program web masih sama maka kita tinggal mengubah isi / value dari css yang diload untuk web page tersebut.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s