MODUL VII, WEB 1

BEKERJA DENGAN CSS
 

1.      TUJUAN
Mahasiswa dapat memeprindah dan mengatur halaman websecara praktis dengan menggunakan CSS
2.      TEORISINGKAT
         CSS atau cascading style sheetsdigunakan dalam kode html untuk menciptakan suatu kumpulan style yang dapatdigunakan 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 dapatmenggunakan dua pola. Pola yang pertama yaitu inner, dimana perintah-perintahstyle css berada di dalam satu file dengan file html yang diaturnya. Sedangkantipe yang kedua adalah meletakkan peritah-perintah style css berada dalam filetersendiri 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 akanmenggunakannya. File ex1.css ini dapat dimanfaatkan oleh banyak file html jugadifungsikan untuk mengatur tampilan web page tersebut. Sehingga dapat kitafahami bahwa cukup efisien apabila kita memanfaatkan file css ini untukmemanipulasi tampilan suatu web. Dengan sekali membuat aturan dapatdimanfaatkan untuk banyak web page.

         Antara file style css dengan file htmlyang digunakan untuk menghubungkan adalah tag . Ternyata dengan tag ini akan mengarahkanagar web page ini membaca file ex1.css sebagai referensi pengaturan dalam webyang dibuat ini. Dan karena pada tag di atas adalah statemen text maka kitadapat mereferensikan dengan perintah href=ex2.txt dimana yang dijadikanreferensi adalah file ex2.txt /file text.

         File ex1. css ini digunakan untukmemformat body secara keseluruhan dengan background layar warna kuning/yellow. Dantiga buah style yang lain adalah h1 yang digunakan untuk memformat besarnyafont menjadi 36 pixel, style h2 dengan pengaturan warna text adalah berwarnabiru 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 iniberukuran 36

Tulisan iniberwarna BIRU 36

Ini paragrafdengna left margin 50 pixel

 

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

maka tulisan tersebut akan diformat denganfont yang berukuran 36 pixel sebagaimana di file css. Kemudian pada baris keduadiberikan tag

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

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

dimana fungsi

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

 

 

Membuat file praktek2.html

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

Perintahpertana yang digunakan adalah:

  {background-color:#FF0000}

      Adalah memberikanwarna background pada text berwarna merah.

   {background-color:#e0ffff}

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

      Adalah memberikan warna background padatext berwarna biru muda/aqua.
Tapi tag-tag pada style di atas tidak ada yang melakukanpengaturan warna font sehingga warna font tetap berwarna hitam. Baiklah kitalihat tampilan web dengan tag style  yangdiletakkan menjadi satu dengan web pagenya.

h1

{

background-color:#FF0000;

}

p

{

background-color:#e0ffff;

}

div

{

background-color:#b0c4de;

}

Contoh Background CSS

Ini text yangmenggunakan tag div

Ini paragrafyang mempunyai background

Ini masih di taq div

Mengubah h1 sebagaimana di bawah warnafont menjadi putih.
Berikut ini tag yang dipergunakan untuk melakukanperubahan terhadap tampilan tag tetapi perintah tersebut dimasukkan ke tagstyle. Kita hanya perlu menambahkan color pada tag yang kita inginkan. Untukkali ini kita coba mengubah warna font pada taq

sehingga menjadi sebagaimanadi bawah ini. Fungsi color: white adalah script untukmemberikan 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 padasuatu 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 tagstyle 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 stylemenggunakan class normal dan class italic. Dua kelas ini dimanfaatkan untukmengatur  bentuk tampilan tulisan yaitunormal dan italic atau tulisan miring. Pada saat pemanggilan kita menggunakanstatemen class=”nama kelas”. Bentuk perintah di bawah ini memformat agartulisan pada baris pertama ditampilkan dalam bentuk text normal/biasa denganadanya tag
. Sedangkan pada text baris ke 2 tampilanhuruf dalam bentuk huruf miring atau italic dengan adanya perintah

p.normal {font-style: normal}

p.italic {font-style: italic}

Ini paragraf, dengan fontnormal.

Ini paragraf, dengan fontnormal.

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

Gambaran secara umumnya sebagaimana kami contohkansebagai berikut:

<!–

      #Tebal{font-weight:bold;

                  color:blue;}

      #Miring{font-style:italic;

                  color:green;}

–>

Diatasadalah menciptakan tag style Tebal dan Miring.
Untuk mengetahui perbedaan penggunaan tag id pada stylekita coba memodifikasi praktek 3 dengan menggunakan id. Pada saat id inidipanggil dalam body html dengan

maka format hurufberwarna putih dan background tulisan berwarna merah akan dikenakan pada textyang ditulis setelahnya sampai ada tanda

atau sampai  ada tag pengaturan lain berada di antaratanda tersebut.

pada
Pada style id #Biasa dan #Coba ada script margin-left:-30pxadalah menugaskan agar tulisan menjorok dibagian kiri sebanyak 30 titik ataupixel. Titik awal yang digunakan sebagai standar mengkirikan tulisan adalahpengaturan posisi baris sebelumnya. Jadi pabila pada posisi sebelumnya berada50 pixel sebelah kanan, maka letak baris yang diatur -30px akan berada 30 pixeldi sebelah kiri dari 50 pixel atau bisa disebut 20 pixel di sebelah titikpaling kiri. Sebagaimana contoh di bawah ini, modifikasi dari html praktek3.htmlmenjadi praktek3Id.html Dapat kita lihat bahwa text ke 3 dengan warna fontmerah dan background warna kuning. Posisi baris tersebut berada di sebelah kiribaris 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 mempunyaibackground

Ini masih di taq div

Membuat style besarnya font pada dengan nama file praktek5.html
Tag style yang dipergunakan untuk mengatur besarnya fontadalah font-size:[angka] px. Angka adalah bilangan dari 1-tak terhingga, tetapidalam prakteknya dengan angka 1000 pixel saja kita sudah kesulitan untukmelihatnya, karena kemampuan monitor normal saat ini biasanya kisaran 1024 x800 pixel saja. Di bawah ini ada tiga pengaturan yaitu h1 dengan besarnya font40 pixel, h2 sebesar 30 pixel dan p adalah 14pixel. Yang kemudian style tagtersebut 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 programpraktek6.html dengan praktek6a.html akan terlihat beberapa perbedaan, dimanapada praktek6.html terdapat 6 tag pengaturan sedangkan praktek 6a.html hanyaterdapat 3 tag html. Karena tag yang digunakan untuk mengatur color sudahdijadikan satu dengan tag untuk mengatur besaran font . Jika para praktek6.htmlini kita perhatikan tidak ada bedanya dengan bila kita menuliskan tag-taglangsung ke html tanpa menggunakan css. Nah, untuk tag pada web praktek6a.htmlsudah menggunakan tag yang cukup efektif dengan menggabungkan beberapa pengaturandalam 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 ukuran40

Ini heading ukuran30

Ini heading ukuran 14

Buatlah Praktek6a.html sebagaimanaperintah di bawah ini agar kita tahu perubahan yang terjadi dengan memakai tagstyle 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

      }

 

Iniheading ukuran 40

Iniheading ukuran 30

Iniheading ukuran 14

LATIHAN
Untuk latihan ini menggunakan tag style 4 buah, 1 buahtag style biasa, dan 3 buah class style yang digunakan sebagai pengaturanposisi text. Tag style h1 digunakan untuk menga besaran font yaitu 40 pixel danwarna font menggunakan biru. Tag style class p.center adalah untuk mengaturletak text agar berada di tengah, tag p.right mengatur agar text rata di sisikanan 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 berkatakepada saya bahwa”
setiap kali Anamerasa ingin mengkritik siapapun”, katanya kepada saya,Ingatlah, bahwasemua orang di dunia ini tidak memiliki kelebihan yang sama seperti yang Andamiliki”, Ingatlah selalu kata-kata itu. Oke….oke…oke…

TUGAS:
Membuat tampilanpada 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}

 

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

DaftarWarga
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.

Untukdapat menghafal tersebut kita perlu banyak latihan. Hal ini dilakukan sekaliguskarena css ini sangat bermanfaat dan efisien. Khususnya dalam pengembangan webberbasis content. Jika kita lihat dari fungsi style adalah semacam variabel,dimana web page adalah program operasionalnya. Jika kita melakukan sebuahoperasi yang  sama persis namun denganvalue variabel yang berbeda kita tinggal mengisikannya. Demikian juga css ini,jika kita menginginkan tampilan berbeda namun struktur program web masih samamaka 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