MODUL VIII, WEB 1

BEKERJA LANJUT DENGAN CSS
 

1.      TUJUAN
Mahasiswa dapat mengatur teks, links, link dengan properti-propertu yang ada dalam 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

 

Membuat script html praktek81.html

Membuat tampilan animasi sederhana dengan css model link, visited, hover. Dengan memanfaatkan perintah link, sebagaimana biasa adalah perintah untuk melinkkan suatu alamat url agar dapat dituju oleh suatu web jika link tersebut diklik. Visited artinya ketika telah dikunjungi maka akan berwarna merah sedangkan hover menunjukkan perintah agar pada saat kursos tersebut berada diatasnya maka action akan dilakukan sesuai dengan perintah tertulis dalam taq hover.

Di sini ada lima (5) buah css untuk mengatur tampilan lima baris kalimat yang dibuat berbeda. Dibuat demikian agar kita dapat mengetahui bagaimana perbedaan reaksi dari masing-masing perintah dengan memanfaatkan css di bawah ini.

Pada tag clas one, adalah menampilkan link dengan menampilkan reaksi dimana pada saat mouse over maka reaksi dari kalimat link berubah menjadi berwarna biru karena kode #3300CC adalah kode dari warna biru walaupun pada saat pertama ditampilkan warnanya adalah merah dengan garis bawah/underline (default dari suatu link).

Selanjutnya adalah kelas two, dimana fungsi link diubah menjadi bepenampilan dengan huruf yang berubah menjadi besar ketika mouse berada diatasnya. Sedangkan pada kelas three  penampilan link berubah menjadi berlatar belakang warna hijau. Dan untuk link ke empat atau pada kelas four tipe font berubah menjadi courier new, dan yang terakhir pada kelas css five tampilan pada awal link tidak menggunakan garis bawah ketika make over berubah menjadi bergaris bawah dengan perintah text-decoration: underline. Namun pada kelas kelima ini untuk menghilangkan default garis bawah pada link kita harus menambahkan pada kelas five.link dan five.visited dengan text-decoration: none. Agar tampilan ketika kelas five.hover dapat dilihat perbedaannya.

 

a.one:link{color: #ff0000}

a.one:visited{color: #0000ff}

a.one:hover{color: #3300CC}

 

a.two:link{color: #ff0000}

a.two:visited{color: #0000ff}

a.two:hover{font-size: 150%}

 

a.three:link{color: #ff0000}

a.three:visited{color: #   0000ff}

a.three:hover{background: #66ff66}

 

a.four:link{color: #ff0000}

a.four:visited{color: #0000ff}

a.four:hover{font-family: monospace}

 

a.five:link{color: #ff0000;text-decoration:none}

a.five:visited{color: #0000ff;text-decoration:none}

a.five:hover{text-decoration: underline;color:blue}

 

 

Arahkan kursor pada link untuk melihat perubahannya






Hasil tampilan program:
File praktek ke dua beri nama praktek82.html
Praktek ke dua ini cukup banyak penggunaan tag style, yaitu ada 7 (tujuh) selector. Selector ul adalah untuk mengatur tampilan daftar list tanpa numbering, batas margin 0, jarak tulisan dari sisi-sisi kosong, dan overflow . Selector li digunakan untuk mengatur list agar ditampilkan dalam bentuk list berjajar ke kanan atau ke bawah. Karena menggunakan left atau right maka list tersebut akan diarahkan ke kanan, tetapi ketika kita gunakan center maka akan ditampikan berjajar ke bawah. Selector h1 digunakan untuk mengatur besaran font dengan ukuran 30px dan berwarna merah.
Selain itu ada selector table yang berisi pengaturan boder tabel sebesar 1 pixel dengan warna solid hitam. Dengan selector td yang digunakan untuk mengatur kolom-kolom pada tabel dikondisikan dengan posisi text berada di tengah (text-align:center) dan menggunakan warna background  biru muda. Selector td.atas adalah turunan dari selector td dengan menggunakan text-align sama yaitu center atau text berada di tengah, background-position:center adalah perintah untuk menempatkan background agar senantiasa berada di tengah dan background-image menggunakan gambar dengan nama file 1.gif, script url digunakan untuk mengatur nama file dan letak forlder file gambar tersebut.
Selector yang cukup rumit adalah selector a yang didalamnya terdapat bagian a:link, a:visited, a:hover, a:active. Pada a:link, adalah perintah terkiat link ke url, a: visited selalu berpasangan dengan a:link digunakan untuk mengetahui suatu link yang sudah dikunjungi. Selector a:hover terkait tampilan ketika mouse over atau mouse berada di atas link tersebut, dan a:active adalah pasangan agar dengan a:hover dan untuk menunjukkan link mana yang aktif.
Demikianlah, penyusunan selector/tag style sudah cukup untuk memformat suatu tampilan web agar cukup menarik. Sehingga dapat diimplementasikan pada web html sebagaimana di bawah ini. Selector ini digunakan untuk membuat tabel dengan latar belakang biru muda. Terdiri dari 3 baris dan satu kolom, dapat dilihat dari pasangan tag

dan

, masing-masing berjumlah 3 dan 1.

Pada baris bertama diisi dengan tulisan WEBSITEKU dengan latar belakang adalah gambar kelinci bergerak yang diambil dari file 1.gif berbentuk animasi gif karena baris ini menggunakan selector td.atas dengan perintah
. Baris kedua berisi daftar list yang disusun mendatar ke kanan karena menggunakan selector td yang didalamnya terdapat tag ul dan li {float:left}. Walaupun pada script tampilan tulisan link menggunakan huruf kecil tetapi karena menggunakan  tag text-transform: uppercase untuk mengubah huruf kecil menjadi huruf besar semua. Warna, letak, jenis font, besarnya diatur dalam selector a:link, a:visited ini. Sedangkan tampilan ketika mouse over menjadi merah diatur dalam selector a:hover, a:actived.

ul

       {

       list-style-type:none;

       margin:0;

       padding:0;

       overflow:hidden;

       }

 

li

       {float:left;}

 

h1

       {

       font-size: 30px;

       color:#ffffff;

       }

 

table

       {

       border:1px;

       solid:black;

       }

 

td

       {

       text-align:center;

       background-color:#9999FF;

       }

 

td.atas

       {

       text-align:center;

       background-position:center;

       background-image:url(gambar1.jpg);

       }

 

a:link,a:visited

       {

       display:block;

       width:120px;

       font-weight: bold;

       color: #FFFFFF;

       background-color:#9966FF;

       text-align:center;

       padding: 4px;

       text-decoration: none;

       text-transform: uppercase;

       }

 

a:hover,a:active

       {

       background-color:red;

       }

 

      

             

             

      

      

      

                    

WEBSITEKU

             

                    

                        
  • Home
  •                     
  • Profil
  •                     
  • Friends
  •                     
  • Inbox
  •                     

             
Selamat datang di website kami
Copy@right by fm2010

Hasil script:
Memodifikasi file praktek83.html
Berikut ini adalah cara sederhana untuk memodifiksi agar tampilan menu link tidak lagi berjajar ke kanan tetapi ke bawah. Kita tidak perlu melakukan banyak perubahan, ada bebrapa cara. Pada kesempatan ini kita akan coba melakukan perubahan dengan menghilangkan tag li pada tag
    yang fungsinya untuk menampilkan daftar list.

    Cara yang kedua lebih mudah lagi yaitu dengan mengubah perintah pada float: left; menjadi float:center pada selector li juga. Jadi kalau cara yang pertama adalah menghilangkan tag li yang berada di dalam body html tetapi cara yang kedua adalah dengan mengubah statemen li pada tag style li, sehingga menjadi seperti di bawah ini. Atau mungkin sekaligus dengan menghilangkan selector li.
    li
          {
          float:center;
          }
    Dibawah ini kita mencoba dengan cara yang pertama sekaligus memodifikasinya dengan menambah colom dalam tabel. Sehingga tabel yang tadinya terdiri dari 3 baris 1 kolom berubah menjadi 3 baris 2 kolom. Kemudian kita menghilangkan tanda tag li pada body tag.

    ul

           {

           list-style-type:none;

           margin:0;

           padding:0;

           overflow:hidden;

           }

     

    li

           {

           float:left;

           }

     

    h1

           {

           font-size: 30px;

           color:red;

           }

     

    table

           {

           border:1px;

           solid:black;

           }

     

    td

           {

           text-align:center;

           background-color:#9999FF;

           }

     

    td.atas

           {

           text-align:center;

           background-position:center;

           background-image:url(1.gif);

           }

     

    a:link,a:visited

           {

           display:block;

           width:120px;

           font-weight: bold;

           color: #FFFFFF;

           background-color:#9966FF;

           text-align:center;

           padding: 4px;

           text-decoration: none;

           text-transform: uppercase;

           }

     

    a:hover,a:active

           {

           background-color:#990099;

           }

     

          

                 

                 

                 

                 

          

          

          

                        

    WEBSITEKU

                 

                        

                           Home
                           Profil
                           Friends
                           Inbox
                          

                 

                 
                 
    Selamat datang di website kami
    Copy@right by fm2010

    Hasil script
    TUGAS:
    Membuat tampilan sederhana untuk suatu web dengan menggunakan css. Kita hanya melakukan perubahan pada tugas di atas. Dengan menambahkan beberapa tampilan.

    ul

           {

           list-style-type:none;

           margin:0;

           padding:0;

           overflow:hidden;

           }

     

    li

           {

           float:left;

           }

     

    h1

           {

           font-size: 30px;

           color:red;

           }

     

    table

           {

           border:4px;

           solid:black;

           }

     

    td

           {

           text-align:center;

           background-image:url(back2.jpg);

           }

     

    td.atas

           {

           text-align:center;

           background-position:center;

           background-image:url(back1.jpg);

           }

     

    a:link,a:visited

           {

           display:block;

           width:120px;

           font-weight: bold;

           color: #FFFFFF;

           background-color:#9966FF;

           text-align:center;

           padding: 4px;

           text-decoration: none;

           text-transform: uppercase;

           }

     

    a:hover,a:active

           {

           background-color:#990099;

           }

     

    w

           {

           font-size:20px;

           color:white;

           }

     

          

                 

                 

                 

                 

          

          

          

                        

    BLOODER GROUP

                 

                        

                           Home
                           Profil
                           Comunity
                           Comment
                          

                 

                 
                 
    Selamat datang di website kami

           kami adalah salah satu kelompok dari sekian banyak masyarakat yang peduli pada kemanusiaan.
           Dengan memberikan setes darah yang mungkin tidak kita
           butuhkan karena berlebihnya daerah pada tubuh kita jauh lebih bermanfaat apabila dapat dimanfaatkan oleh orang lain.
          
    Copy@right by fm2010

    KESIMPULAN:
  • Dengan css efisiensi penulisan script web page dapat dimaksimalkan, karena dengan banyaknya perulangan penulisan suatu tag dapat diringkas menjadi satu atau beberapa bagian saja yang kita definisikan. Misalnya pada saat kita menuliskan (font size=”12px” color=”blue” face=”arial”> dan itu kita perlukan berulang-ulang karena posisinya berada di dalam suatu tabel. Kita cukup menuliskannya dalam satu selektor saja, misalnya dalam bentuk {font-size:12px color:blue font-family:arial}, sehingga setiap saat yang kita panggil adalah selektor saja.
  • Apabila suatu web sudah disusun dalam bentuk format css maka setiap kita menginginkan untuk modif tampilan cukup file css yang kita modifikasi, tidak perlu kita mengobrak-abrik file html. Inilah yang kemudian banyak disukai oleh programer web karena kemudahan dan efisiensi dalam penggunaan. Dapat kita lihat saat ini banyak development program menggunakan prinsip css seperti joomla dan pada aplikasi banyak digunakan untuk blog-blog gratisan maupun yang berbayar.
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